Главная » Разное » Как создать index html файл

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


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

Любой сайт представляет собой набор файлов, которые объединены под одним адресом (доменом). Про домены, мы с Вами поговорим позже, а сейчас отметим, что web браузер может открывать файлы HTML формата.

Файлы html формата, это файлы определенной структуры, имеющие расширение .html или .htm. Об этом мы с вами говорили в прошлом, 4 уроке: Принцип работы языка HTML.

Файлы HTML формата, содержат код, в котором, управляющими тегами, браузеру указывается, где и как расположить на web странице объекты. А именно: текст, изображения, аудио, видео, Flash и другие объекты.

То есть, в состав сайта могут входить файлы самых разных форматов, но все эти файлы так или иначе, описаны (размечены) в файлах HTML.

Следует отметить, что сайты могут содержать какое угодно количество страниц, от одной до нескольких тысяч.

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

Ну что же, в этом уроке рассмотрим, - как создать html файл.


 

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

Рассмотрим два варианта создания файла с расширением html.

В первом варианте, мы создадим html файл средствами Windows, а во втором варианте, мы создадим html файл с помощью блокнота Notepad++.

Итак, для создания html файла средствами OS Windows, кликнем правой кнопкой мыши в любой папке, или, например, на рабочем столе компьютера.

В открывшемся контекстном меню, выберем – Создать -> Текстовый документ. Система создаст файл с именем: Новый текстовый документ.txt

В зависимости от настроек Вашего компьютера, расширение файла (в данном случае .txt), может отображаться или не отображаться. Нам сейчас важно, чтобы расширения файлов на Вашем компьютере отображались.

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


Вот пример подобных настроек для Windows 7:

Нажимаем кнопки: Пуск – Панель управления – Параметры папок.

В окне параметров папок, в верхнем меню выбираем: «Вид».

Далее находим режим: «Скрывать расширения для зарегистрированных типов файлов»

От того, установлен флажок слева от этой опции или нет, зависит, будут или не будут отображаться расширения файлов Windows.

Нам необходимо, Чтобы расширения файлов отображались, поэтому флажок убираем.


 

Итак, надеюсь, что с расширение файлов Вы разобрались и вновь созданный текстовый файл у Вас отображается с расширением: Новый текстовый документ.txt

Теперь нам осталось переименовать имя и расширение только что созданного файла.

Для этого кликнем правой кнопкой мыши на созданном файле и выберем в открывшемся окне – «Переименовать».

Зададим имя файла – index, а расширение - html. Теперь у нас есть HTML файл главной страницы сайта index.html, с которым, мы можем экспериментировать.

Перейдем ко второму способу создания html файла. В этом случае воспользуемся блокнотом Notepad++.

Запустим программу блокнот Notepad++. Для того, чтобы создать html файл, кликнем в меню блокнота: «Файл» - «Сохранить как».

Откроется окно, в котором необходимо задать имя файла, в нашем случае – index. Далее, необходимо выбрать «Тип файла», кликаем на прокрутку окна типа файла и выбираем тип: «HyperTextMarkup Language *.html; *.htm»

Далее выбираем папку, в которую будет сохранен файл и жмем «Сохранить».

Итак, в этом уроке, мы с Вами научились создавать html файлы двумя способами.

А сейчас, обратите внимание на очень важный момент. Любой html файл или любой html документ, должен иметь определенную внутреннюю структуру.

О структуре html документа (файла), мы поговорим в следующем уроке.

Урок 6 - Структура html документа

Урок 4 - Принцип работы языка HTML

Автор: Виктор Милованов

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

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

Давайте приступим к практическим действиям и прямо сейчас создадим свой первый HTML-файл.

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

Для тех, кто любит видео:

Все мои уроки по HTML и верстке сайтов здесь.

Первый способ, который мы рассмотрим по созданию файла HTML - это способ создания файла в простом текстовом редакторе.

Способ 1. Создаем файл html в программе «Блокнот».

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

В главном меню программы выбираем «Файл-Сохранить как».


И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.html.

Если у Вас не отображается расширение файлов, вот заметка:

Как включить отображение расширений файлов в Windows.

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

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

Аналогично html-файл создается с помощью программы Notepad++.

Но, пользоваться таким способом не всегда бывает удобно и, как видите, это не самый быстрый способ по созданию html-файлов. Есть программы, которые позволяют решить эту проблему намного быстрее.

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

Способ 2. Создание файла HTML в универсальном редакторе кода (на примере Dreamweaver).

После того, как программа загрузиться появляется следующее окно приветствия:


Все, что нужно сделать, это выбрать в этом окне, в разделе «Создать», файл HTML.

После этого файл будет успешно создан. Причем, обратите внимание, что программой был автоматически добавлен некоторый код.

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

Теперь, для того, чтобы этот файл появился на жестком диске, его нужно сохранить. Делается это через меню «Файл – Сохранить как…»


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

Обратите внимание, чтобы при сохранении вы случайно не убрали расширение html, которое присваивается файлу.

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

Все мои уроки по HTML и верстке сайтов здесь.

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

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

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

Создать HTML файл

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

Другими словами, если текстовый документ назывался "Новый текстовый документ.txt", то переименуете его в "Новый текстовый документ.html".

Обратите внимание на то, что по умолчанию в системе Windows скрыты расширения файлов. Поэтому вместо имени файла "Новый текстовый документ.txt" вы можете увидеть только "Новый текстовый документ". Чтобы включить отображение расширений файлов, нажмите на закладку "Вид" в проводнике файлов, а затем поставьте галочку на пункте "Расширения имён файлов"

Редактировать HTML файл

Кликните правой кнопкой мыши на html файл. Выберите пункт "Открыть с помощью". В этом пункте выберите блокнот или другой редактор простейших текстовых файлов. Если такого пункта нет, то нажмите "Выбрать другое приложение" и выберите блокнот в списке приложений.

Можно редактировать HTML файл и в других текстовых редакторах. К примеру, в MS Office Word. Но есть вероятность, что будут проблемы с сохранением файла: редактор самостоятельно будет вставлять ненужные теги при сохранении. Поэтому рекомендуем использовать простейшие программы для редактирования текстовых файлов. К примеру, "блокнот".


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

Посмотреть HTML файл в браузере

Чтобы посмотреть как выглядит сохранённый HTML файл в браузере, кликните на него два раза. Загрузится браузер и отобразит html файл. Если этого не произошло и файл открылся в текстовом редакторе, то кликните на файл правой кнопкой мыши. Затем выберите пункт "Открыть с помощью", в котором выберите свой браузер. Если в этом списке браузера нет, то нажмите "Выбрать другое приложение" и выберите свой браузер из всех установленных на компьютере приложений.

При сохранении HTML файла нет нужды закрывать его в браузере. Вы можете одновременно изменять содержимое файла через текстовый редактор и просматривать результаты в браузере. Только не забудьте обновить страницу в браузере после внесения изменений в файл (кнопка - "F5").

О том что именно должен содержать стандартный HTML файл читайте в статье "Структура HTML файла".

Создание HTML документа (файла). Смена расширения файла

HTML документ - это обычный текстовой файл c расширением .html, который содержит HTML-код. HTML документ иначе ещё называют HTML файлом.

Чтобы из обычного текстового файла (с расширением .txt) сделать HTML документ, нужно сменить расширение с .txt на .html.

Открыть файл, сохраненный с расширением .html, для просмотра в браузере можно двумя способами:

Windows

  1. Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
  2. Кликнуть по нему ПКМ → навести курсор на открыть с помощью... → выбрать нужный браузер.

При получении HTML документа браузер будет отображать его в виде веб-страницы (веб-страница - это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:


 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Заголовок</title>
 </head>
 <body>
 <h2>Мой первый заголовок</h2>
 <p>Мой первый абзац</p>
 </body>
 </html>

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

Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью... → и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).

Смена расширения файла

Windows:

  1. В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмём сохранить. Всё, HTML документ создан.
  2. Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: открываем Панель управления → выбираем Параметры папок (в Windows 10 данный пункт называется Параметры проводника) → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов.

С этой темой смотрят:

Как написать и запустить HTML на компьютере? — Блог HTML Academy

Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. В этом выпуске разберёмся, как и в чём написать и запустить HTML-код на своём компьютере.

Шаг 1. Качаем текстовый редактор

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Страницы загрузки Visual Studio Code

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

Добавление папки в Visual Studio Code

По шагам на скриншоте:

  1. Add workspace folder — открывает меню выбора папки.
  2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
  3. Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Создание файлов в Visual Studio Code

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Разделение экрана в Visual Studio Code

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

index.html

<!DOCTYPE html>
 <html lang="ru">
 <head>
 <title>Сайт начинающего верстальщика</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <header>
 <nav>
 На главную
 </nav>
 </header>
 <main>
 <article>
 День первый. Как я забыл покормить кота
 
 Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить.
 
 Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.
 </article>
 <aside>
 Здесь могла быть ваша реклама.
 </aside>
 </main>
 <footer>
 Подвал сайта
 </footer>
 </body>
 </html>

style.css

Скопируем код со стилями из файла https://htmlacademy.ru/assets/courses/299/outlines.css — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

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

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

Расширение Live Server в Visual Studio Code

После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.

Оповещение безопасности Windows

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Кнопка Go Live в Visual Studio Code

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

Рабочее пространство: слева — Visual Studio Code, справа — браузер

Что мы сделали

  1. Установили и настроили редактор кода.
  2. Создали рабочую папку и добавили туда файлы нашего проекта.
  3. Научились редактировать и сохранять файлы с кодом.
  4. Установили расширение, чтобы сразу видеть результат вёрстки.

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

Не знаете, какой код написать?

Знакомство с HTML и CSS на интерактивных курсах — бесплатно.

Регистрация

Нажатие на кнопку — согласие на обработку персональных данных

Внеклассное чтение:

Страница index.

Урок 12.

Что такое страница index? Это главная страница сайта.

У каждого сайта есть главная страница. Предположим у нас сайт автомобильной тематики имеющий 4 страницы. Это страница про автомобили Audi, вторая про BMW, третья про Mercedes и четвертая - это главная страница нашего сайта. Соответственно папка в которой находится наш сайт будет иметь 4 файла. Это audi.html, bmw.html, mercedes.html и index.html

Допустим наш сайт уже находится в интернете и имеет доменное имя "nemeckieavto.ru".
По ссылке nemeckieavto.ru/audi будет открываться наш файл audi.html
По ссылке nemeckieavto.ru/bmw будет открываться наш файл bmw.html
По ссылке nemeckieavto.ru/mercedes будет открываться наш файл mercedes.html
Теперь внимание! Для того, чтобы попасть на главную страницу нашего сайта, не нужно вводить в адресной строке nemeckieavto.ru/index, достаточно будет только ввести nemeckieavto.ru

Тем кто не понял, вот второй вариант объяснения:
1) Каждый сайт в интернете имеет доменное имя (домен).
2) Каждый сайт (за исключением одностраничных) имеет энное количество страниц (файлов), которые имеют свои названия.
3) Эти самые страницы (файлы) сайта будут доступны по адресу www.домен/название страницы
4) Главная страница сайта (файл index.html) будет доступна по адресу www.домен

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

Создаем еще три страницы html.

На 2-ом уроке мы создали папку "Сайт" и в ней создали файл с расширением html. Скорее всего этот файл у Вас называется "new 0". Сейчас давайте в этой папке создадим еще 3 файла. Чтобы не заморачиваться с расширением и с кодировкой (2 урок), можно просто сделать 3 копии нашего файла "new 0". Таким образом у нас получится 4 файла с расширением html. Перед тем как сделать копии, удалите все html коды, которые мы писали в процессе работы. Оставьте только теги относящиеся к структуре html страницы.

С этими файлами мы будем работать в следующих уроках. Теперь давайте переименуем файлы и дадим им имена audi.html, bmw.html, mercedes.html и index.html. Не используйте в названии файлов заглавные буквы, с чем это связанно, Вы узнаете из следующего урока. Внимание! Если я пишу, что файл должен иметь имя, например, bmw.html, то это не значит что нужно дать ему имя bmw.html, это значит ,что файл должен иметь имя bmw, а html - это расширение (тип) файла, а не часть его имени!

Для тех, кто в танке, в результате в папке "Сайт" у нас 4 файла с расширением html:

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

Вы что-то не поняли из этого урока? Спрашивайте!
- [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

Создание индекса для веб-сайта

В этой статье

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

Чтобы создать индекс для веб-сайта

  1. Создайте индексный файл.

  2. Создайте файл HTML, который будет содержать ваш index.

  3. Поместите курсор в то место, где вы хотите разместить индексный файл, а затем щелкните HTML Help ActiveX Control .

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

  4. В поле Укажите команду щелкните Индекс и следуйте инструкциям на экране.

Банкноты

О создании индексных файлов

.

Как создать индексный файл

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

Щелкните кнопку «Пуск». В поле «Поиск» введите «блокнот». Нажмите Ввод." Примечание. Вы также можете найти Блокнот, нажав «Все программы», «Стандартные», а затем «Блокнот».

Введите «.» Нажмите «Enter» и введите «». В этих двух тегах вы будете писать все, что хотите, в своем индексном файле.

После «» нажмите «Enter», создав пустую строку между ним и «», который вы ввели ранее.Здесь вы войдете в несколько дополнительных частей вашего сайта. Введите «» и нажмите «Enter». Теперь введите «». После этого укажите название вашего сайта. Это не будет отображаться в окне браузера. Вместо этого он будет отображаться в строке заголовка (то есть, когда вы посещаете такую ​​страницу, как «Google.com», в строке заголовка отображается «Google»). Теперь введите и нажмите «Enter». Введите «» и нажмите «Enter».

Введите «» и нажмите «Enter.Здесь вы введете фактическое содержание вашего веб-сайта. Например, если вы хотите, чтобы заголовок отображался в окне браузера, вы можете ввести «

Мой отличный веб-сайт

». Или, если вам нужна ссылка, введите отличный веб-сайт ". Вы можете использовать указанные ниже ресурсы, чтобы узнать больше о командах HTML, которые можно включить в ваш индексный файл. После того, как вы закончите вводить все, что будет отображаться на главной странице вашего веб-сайта, просто введите «» и нажмите «Enter».

Щелкните «Файл». Нажмите «Сохранить как». Выберите «Все файлы». Введите index.html. Нажмите Ввод." Ваш индексный файл создан.

Советы

Веб-браузеры не заботятся о разрывах страниц или абзацев. Так, например, если бы вы написали My Website

This is My Great Website.

Это сайт моего друга. Проверить это.

.

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

Также не обязательно использовать теги «», «» и «», хотя они упрощают написание веб-страниц и могут быть полезны в некоторых случаях.

Предупреждения

Всегда не забывайте размещать теги парами (например, если вы начинаете «

», чтобы создать заголовок, убедитесь, что вы закончили его с «

». В противном случае будет отображаться весь ваш веб-сайт как товарная позиция

.

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

Привет, добро пожаловать в этот новый урок !!

Перед тем, как начать, если у вас есть вопросы, не стесняйтесь оставлять комментарии!
С удовольствием помогу, нет глупых вопросов!

Наконец-то учебник по выучите код !
Yeeeaaahhh !!

Если следовать строке «» Как создать сайт с нуля? ”, у вас уже должен быть установлен Wampserver с новым проектом, в противном случае прочтите мой предыдущий учебник

Итак, откройте эту папку… и включите Wampserver !


В этой папке щелкните правой кнопкой мыши и создайте новый текстовый файл …

Назовите его нужным именем и замените.txt с .html .
Подтвердите, если вам нужно подтвердить, что вы хотите изменить это расширение.

Поздравляем!
Вы только что создали свой первый HTML-файл … ладно, пустой, но это только первый шаг!

Теперь откройте его в своем любимом текстовом редакторе …

Любой текстовый редактор может выполнить эту работу, я использую Notepad ++, он бесплатный, мощный и очень простой в использовании!

Запишите несколько строк:

Я люблю www.development-tutorial.com

так же сильно, как я люблю клубнику или шоколад

или что-то еще, что я люблю!

И еще один ряд внизу!


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

«AAAAAAaaaaaaaahhhh но это не похоже на то, что я сделал!»

Это то, как вы должны были отреагировать!

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

Вы никогда не получите сообщение об ошибке , если вы напишете неправильный код! (За исключением некоторых инструментов…)
На странице по-прежнему отображается , даже если есть ошибки!

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

Вы увидите, очень скоро это будет очень весело!
Мухахахахах!

Базовая структура HTML-файла выглядит так….

Titre

Мой супер-крутой учебник

Мой супер-текст


Позвольте мне дать вам некоторое объяснение и забыть первую строчку, мы вернемся позже.
Давайте посмотрим на все теги , мы увидим, что все они имеют одинаковый формат.

Первый встреченный вами элемент, например….


Этот тег называется HTML-тег … не очень сложно, но словарный запас имеет значение.

Формат тега…


{tagName} не может НЕ принимать слово в HTML .
Они должны быть известны из вашего браузера . и существует стандарт, он называется W3c… в данный момент нас это не волнует.

Если быть точным, этот тег является открывающим тегом …

СЕЙЧАС, в HTML-коде выше, в последней строке, вы можете увидеть этот тег:

И этот тег является закрывающим тегом .

И в этот HTML-тег вы можете добавить другие теги.
Это структура языка HTML .

Мы можем добавлять теги в теги теоретически бесконечно!

Продолжайте читать…

...

...


Эти теги находятся на одном уровне.
Кое-что очень важно понять, закрывающие теги идут точно в порядке , противоположном порядку , так как открывающие теги …
Сложное объяснение очень простых знаний!

Другими словами, НИКОГДА НЕ ПЕРЕСЕЧАЙТЕ теги !
Вы можете представить себе кубики внутри других кубиков.

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

В моем примере вы можете видеть, что в элементе

есть элемент .
Все хорошо!

Хорошо, а для метатега ?


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

Ага… к сожалению, нет способа узнать, какой из них мы должны закрыть или нет, но вы увидите, что это ОЧЕНЬ ЛОГИЧЕСКИЙ , если вы знаете его полезность.

Как вы заметили, в этом теге вы видите


Это атрибут со значением .
В большинстве случаев атрибут имеет значение, существует очень , несколько исключений из этого правила!

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

Не волнуйтесь, атрибуты часто повторяются!

Так формат в общем

Мой супертекст!


И исключения -

<атрибут tagName>

Мой супертекст!

И последнее о коде HTML выше…
Эта строка:


Как вы догадались, это HTML-комментарий .

Комментарий - это текст в коде, который не будет выполняться .

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

Комментарии HTML имеют следующий формат:


При этом будьте осторожны с комментариями , потому что ваш браузер не будет их отображать, но они все еще будут в исходном коде … Я покажу вам позже.

СЕЙЧАС, вернемся к первой строке.


Это просто означает, какую версию HTML мы используем.
Какой HTML должен использовать ваш браузер.

Точность имеет значение, потому что есть некоторые различия между размером элементов, высотой, полями, шириной, пространством в различных версиях HTML .

Конечно, если вы добавите DOCTYPE в форму HTML 4 и добавите HTMl 5 тег , ваш браузер должен распознать его, а правильно использовать , но ваш документ может немного отличаться от правильной версии HTML.

В любом случае, в этом уроке я научу HTML 5 !!
У последняя версия !

И теперь НЕ обязательно добавлять, когда это HTLM 5.1 или более, это интероперабельное .
Это означает, что HTML 5 будет совместим со всеми новыми более высокими версиями, как стандарт.

Вернемся к нашей базовой структуре …


Все HTML-документа должны иметь эту структуру с именно этими тегами !

Нам нужен корневой элемент ... чтобы управлять ими всеми и связывать их в темноте!

В будущих уроках вы увидите , почему нам нужен корневой элемент … с DOM … вы увидите, это очень интересно !!

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

Например,
Описание, заголовок веб-страницы, тип кодировки, автор.

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

Моя супер игра


Заголовок здесь, но ничего в теле веб-страницы.

Ну, а теперь мы с тобой! !
Это то место, где должны быть все отображаемые теги !

Только этот тег должен отображать содержимое .

Я сказал «должен», потому что он будет работать, если вы добавите тег

где угодно (например, над тегом ) ... ошибка не будет отображаться, ваш браузер сделает это!
Но это неверно , ваш браузер будет пытаться отобразить вашу веб-страницу, но он, вероятно, деактивирует некоторые теги и добавит другие, потому что они ему нужны.

Попрактикуемся!
Ваш HTML-файл (для меня my-first-page.html) открыт в вашем любимом текстовом редакторе ..

Замените этот текст тем, что вы только что узнали!
Добавьте несколько строк в тег и вместо добавления разрыва строки с помощью Enter добавьте

Точно так же, как показано ниже

Название моей супер игры! Йо!

Я большой текст !!

Я люблю www.development-tutorial.com
так же сильно, как я люблю клубнику или шоколад или что-то еще я люблю!

И еще один ряд внизу!


Сохраните документ и откройте его! Откройте свой localhost
Нажмите на свой проект!

Вы должны зайти на эту страницу и теперь щелкните по ссылке!


И БООООООООООООМ !!
Вы только что создали свою первую веб-страницу !!

Проверить исходный код очень просто:
Щелкните правой кнопкой мыши на вашей странице, щелкните Page Source !

А теперь все видно!
Метаданные , ваш HTML-код и даже ваши комментарии …
Это код, который получил ваш браузер .
И просто из любопытства, если вы хотите увидеть первый веб-сайт в мире , вы даже можете прочитать исходный код первой версии HTML … Доисторический сайт!

В следующем уроке мы увидим, как что-то создать….

Надеюсь, вам понравится этот урок,
Я должен влюбиться.
Поцелуй, любовь!

.

Создание файла HTML | HTML

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

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

После того, как вы настроите свою IDE, мы можем приступить к созданию нашего первого файла HTML!

Ваша первая веб-страница

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

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

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

Создание index.html

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

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

В этом случае все, что вам нужно знать, это то, что когда мы называем HTML-файл index.html , и он находится в корневом каталоге нашего веб-сайта, браузер будет думать, что это домашняя страница нашего сайта!

Теперь, когда у нас есть файл, давайте добавим в него текст и протестируем его в браузере. Внутри index.html введите Hello World . 

 Копия  Привет, мир

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

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

Когда страница загружается в браузере, она должна сказать Hello World !

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

Теги

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

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

Чтобы сделать этот HTML-документ правильным, отформатируем его правильно.
.

HTML-урок 2: Как создать и сохранить свой первый HTML-файл вручную

Пришло время запачкать руки и написать свой первый файл HTML. Начнем с открытия программы редактирования текста. Если вы работаете на ПК с Microsoft Windows, откройте программу с именем «Блокнот» (найдите ее в меню «Пуск» или просто удерживайте клавишу Windows на клавиатуре и нажмите R, затем введите «блокнот» в командной строке запуска и нажмите ввод) . Если вы используете компьютер Macintosh, запустите приложение под названием «TextEdit» (которое можно найти в папке «Приложения»).

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

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

Написание HTML похоже на приготовление бутербродов

Теперь мы готовы начать фактическую структуру нашей страницы.Начните с добавления следующего кода в ваш документ непосредственно под нашим последним фрагментом кода:

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

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

 <тело>

Элемент обозначает часть нашего документа, которая будет содержать наше фактическое содержимое (абзацы, изображения и т. Д.…). Вы можете подумать: "Но я думал, что именно это сделали теги ?" Фактически, элемент содержит все, как наш фактический контент (который находится внутри элемента ), так и более сложные элементы, о которых мы узнаем в будущих уроках.А пока просто знайте, что элемент находится внутри элемента .

Вот как должен выглядеть ваш документ:

, наконец, забавная часть

А теперь давайте добавим наш первый фрагмент контента на нашу страницу! Как насчет большого жирного заголовка? Добавьте следующий код под начальным тегом : 

 
 Это большой жирный заголовок

Этот код поднимает хороший вопрос для начинающего программиста: « Как мне узнать, какой элемент использовать? Как вы решили использовать тег

? ”

Мы решили использовать элемент

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

,

и

для создания иерархии важности для нашего контента.

Русские куклы для укладки

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

Элемент