Как сделать html файл: Как создать файл 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 файл

Любой сайт представляет собой набор файлов, которые объединены под одним адресом (доменом). Про домены, мы с Вами поговорим позже, а сейчас отметим, что 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 файл » Pechenek.NET

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

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

На самом деле, все проще простого. Если вы обладатель Notepad++ , Нажимаете Файл -> Сохранить как… В открывшемся окошке в строке “Тип файла:” ищете и выбираете – Hyper Text Markup Language file(*.html…), выбираете место куда хотите сохранить ваш файл и нажимаете сохранить:

Следующий способ потребует от вас не больше усилий, чем предыдущий. Работаем чем стандартный блокнот. Мы имеем уже определенный код, который необходимо просмотреть в браузере. Нажимаем Файл -> Сохранить как… После имени файла пишем: (имя_файла).html и нажимаем кнопку “Сохранить”.

Файл корректно сохранился, давайте посмотрим что получилось:

Иногда возникают проблемы при отображении

html-файла сохраненного через стандартный блокнот, вместо букв отображаются так называемые “кракозябры”, в таком случае попробуйте выбрать кодировку UTF-8 и снова сохранить файл.

Есть еще один метод преобразования текстового файла с кодом в любой формат! Не только в html. Для того, чтобы воспользоваться этим методом необходимо отобразить формат файлов. Чтобы это сделать заходим в Панель управления -> Оформление и персонализация -> Параметры папок. В появившемся окне переходим на вкладку “Вид”. Опускаем ползунок в самый низ в области “Дополнительные параметры:” и убираем галочку со строки “Скрывать расширения для зарегистрированных типов файлов”:

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

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

Как видите создать HTML файл очень просто. Подписывайтесь на нас в социальных сетях!

Структура HTML документа, как создать первую web страницу

Прежде чем понять, что такое структура html документа и перейти к ее разбору нам нужно выбрать программу в которой мы будем реализовывать наш план. Просто использовать NotePad++ или Блокнот не целесообразно. Лично Я использую программу Sublime Text 3, она отлично подходит для взаимодействия с кодом и упрощает жизнь во многих моментах. По желанию вы так же можете разобраться в программе Brackets от Adobe. Она тоже очень хороша, но на мой взгляд работает значительно дольше чем Sublime.

 

Структура HTML документа

 

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

File > New File. Вы увидите, что у Вас создался новый файл и он будет открыт в новой вкладке редактора. Теперь нажимаем сочетание клавиш CTRL+S  и сохраняем наш документ в папку проекта с название index.html. Абсолютно все файлы типа html, имеют расширение html или htm. Для стартового файла, с которого начинается сайт всегда используем имя index. Это очень важно т.к. при загрузки вашего веб сайта первым делом браузер обращает внимание на этот файл. В итоге у вас выйдет готовый документ, но он пока пустой. Давайте перейдем непосредственно к созданию структуры.

Все страницы html состоят из тегов, их минимальное количество — это три тега на страницу. Они бывают:

  1. Парные/Непарные
  2. Закрывающиеся/Незакрывающиеся

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

Для старых версий языка doctype выглядел так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

В новых версиях, начиная с версии HTML5 и выше определяется следующим образом:

<!doctype html>

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

Так давайте это исправим и напишем следующий тег <html></html>.

<!doctype html>
<html>
</html>

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

Следующим шагом мы прописываем закрывающийся тег <head></head>. Он служит для нашей структуры html документа как служебным тегом. В нем мы можем описать title нашей страницы, подключить скрипты, css стили или написать meta данные.  Давайте теперь рассмотрим и пропишем эти теги в нашем документе.

<title></title> — тег отвечающий за название нашей страницы. Обычно в нем прописывается название вашей организации или название сайта. В нашем случае для примера мы напишем:

<!doctype html>
<html>
<head>
<title>Наш первый сайт</title>
</head>
</html>

Следующим шагом мы зададим нашему документу meta описание.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Наш первый сайт</title>
</head>
</html>

Этот тег говорит нашему браузеру, какую кодировку нужно использовать. Важно знать, что  каждый тег имеет свой атрибут и его значение. Чтоб было более понятно в коде выше атрибутом является «charset», а значением «utf-8». Значение атрибута всегда заключается в кавычки. Также есть и другие виды тега «meta», такие как «keywords» «description» и др.. Но это уже тема семантической разметки.

Давайте разберем тег под названием <body></body>. Боди тег закрывающийся и содержит в себе основную информацию страницы. Т.е после того как мы прописали выше перечисленные теги, нам нужно перейти к созданию информации, которая будет отображаться на сайте и видна пользователям.  Чтобы увидеть это наглядно, давайте пропишем еще несколько тегов.

<h2></h2> — тег в котором указывается заголовок страницы. Существует 6 уровней заголовков от h2-h6. Обычно используют h2 один раз на странице, h3 подзаголовок второго уровня он может использоваться несколько раз и заголовок 3-го уровня h4. Все остальные уровни заголовков используются в крайне редком случае. Поймите одно, что каждый уровень заголовка идет один за другим от h2(самый большой) и до h6(самый маленький). Нельзя использовать теги в такой последовательности h2-h3-h4-h3, важно соблюдать последовательность.

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

В результате у нас получится вот такая структура нашего документа:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Наш первый сайт</title>
</head>
<body>
<h2>Наш первый документ</h2>
<p>Наш первый текст Наш первый текст Наш первый текст</p>
</body>
</html>

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

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

 

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

Как сделать html в word?

Рубрика Word

Также статьи о работе со страницами в Ворде:

  • Как настроить поля страницы в Word?
  • Как в Word отображать на экране сразу две страницы?
  • Как в Word выделить страницу?
  • Как делается зебра в Ворде?

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

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

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

После оформления страницы или открытия уже готового файла Ворд можно переходить к сохранению документа Word как веб страницы. Для этого переходим на вкладку «Файл», выбираем меню «Сохранить как» и выбрав место сохранения указываем тип файла для сохранения «Веб-страница».

При сохранения документа Ворд как веб страницы будет создан файл с расширением *.htm, и папка с таким же названием и добавлением *.files в конце. В htm файле хранится вся текстовая информация и html разметка документа, а в папке будут сохранены все вставляемые в документ объекты и другие вспомогательные файлы.

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

Курсы работы в Корде

HTML является стандартизированным языком гипертекстовой разметки на просторах интернета. Большая часть страниц во всемирной паутине содержат описание разметки, выполненное на HTML или XHTML. При этом, у многих пользователей возникает необходимость перевести HTML-файл в другой, не менее популярный и востребованный стандарт — текстовый документ Microsoft Word. О том, как это сделать, читайте далее.

Урок: Как перевести FB2 в Ворд

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

Открытие и пересохранение файла в текстовом редакторе

Текстовый редактор от Майкрософт может работать не только с собственными форматами DOC, DOCX и их разновидностями. На деле, в этой программе можно открывать и файлы совершенно других форматов, в их числе и HTML. Следовательно, открыв документ этого формата, его можно будет пересохранить в том, который вам нужен на выходе, а именно — DOCX.

Урок: Как перевести Ворд в FB2

1. Откройте папку, в которой находится HTML-документ.

2. Кликните по нему правой кнопкой мышки и выберите «Открыть с помощью»«Word».

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

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

4. Поработав над форматированием текста (если это необходимо), сохраните документ:

  • Откройте вкладку «Файл» и выберите в ней пункт «Сохранить как»;
  • Измените имя файла (опционально), укажите путь для его сохранения;
  • Самое важное — в выпадающем меню под строкой с именем файла выберите формат «Документ Word (*docx)» и нажмите кнопку «Сохранить».

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

Использование программы Total HTML Converter

Total HTML Converter — это простая в использовании и очень удобная программа для конвертирования файлов HTML в другие форматы. В числе таковых электронные таблицы, сканы, графические файлы и текстовые документы, в том числе и так необходимый нам Word. Небольшой недостаток заключается лишь в том, что программа конвертирует HTML в DOC, а не в DOCX, но это уже можно исправить и непосредственно в Ворде.

Урок: Как перевести DjVu в Ворд

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

Скачать Total HTML Converter

1. Загрузив программу на свой компьютер, установите ее, внимательно следуя инструкции инсталлятора.

2. Запустите HTML Converter и, используя встроенный браузер, расположенный слева, укажите путь к HTML-файлу, который вы хотите преобразовать в Word.

3. Установите галочку напротив этого файла и нажмите на панели быстрого доступа кнопку со значком документа DOC.

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

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

5. Нажав «Вперед», вы перейдете к следующему окну, где можно выполнить настройки конвертирования

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

7. Далее можно задать размеры полей.

Урок: Как настроить поля в Ворде

8. Перед вами появится долгожданное окно, в котором уже и можно будет начать конвертирование. Просто нажмите кнопку «Начать».

9. Перед вами появится окно об удачном завершении преобразования, автоматически будет открыта папка, которую вы указали для сохранения документа.

Откройте конвертированный файл в программе Microsoft Word.

Если это требуется, отредактируйте документ, уберите теги (вручную) и пересохраните его в формате DOCX:

  • Перейдите в меню «Файл»«Сохранить как»;
  • Задайте имя файла, укажите путь для сохранения, в выпадающем меню под строкой с именем выберите «Документ Word (*docx)»;
  • Нажмите кнопку «Сохранить».

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

Мы рассмотрели еще один возможный метод преобразования HTML в Ворд, но и это не последний вариант.

Урок: Как перевести текст с фотографии в документ Word

Использование онлайн-конвертеров

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

ConvertFileOnlineConvertioOnline-Convert

Рассмотрим методику преобразования на примере онлайн-конвертера ConvertFileOnline.

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

2. В окне ниже выберите формат, в который требуется преобразовать документ. В нашем с вами случае это MS Word (DOCX). Нажмите кнопку «Конвертировать».

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

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

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

Читать: Режим ограниченной функциональности в Word

Для отключения режима защищенного просмотра просто нажмите кнопку «Разрешить редактирование».

    Урок: Автосохранение в Ворде

    Вот теперь уж мы точно можем закончить. Из этой статьи вы узнали о трех различных методах, с помощью которых можно быстро и удобно преобразовать HTML-файл в текстовый документ Word, будь то DOC или DOCX. То, какой из описанных нами методов выбрать, решать вам.

    Мы рады, что смогли помочь Вам в решении проблемы.

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

    Помогла ли вам эта статья?

    Да Нет

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

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

    Шаги

    1. Загрузите Word.

    2. Напечатайте на странице «Homepage» (Домашняя страница).

    3. Нажмите «Файл» (File) > «Сохранить как веб-страницу» (Save as Webpage). В Office 2007 кликните по кнопке «Офис» (Office) > «Сохранить как» (Save As) > «Другие форматы» (Other Formats).

    4. Сохраните вашу страницу как index.html. Для Office 2007 поменяйте тип файла в меню «Сохранить как» (Save as type) на «Веб-страница» (Web Page).

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

    6. Добавьте немного дополнительного текста; попробуйте ввести, например, «Это моя домашняя страница».

    7. Почаще сохраняйте свою работу (просто нажмите на значок сохранения – Word запомнит документ как веб-страницу).

    8. Делайте то же самое при создании других страниц (прочитайте ниже, как сделать гиперссылку).

    9. Введите «Link to homepage» (Ссылка на домашнюю страницу) под текстом.

    10. Выделите текст.

    11. Кликните «Вставка» (Insert) > «Гиперссылка» (Hyperlink) (для всех версий)

    12. Поищите файл index.html.

    13. Найдя файл, выберите его и нажмите на кнопку «ОК».

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

    15. Вы можете добавить гиперссылку на другой сайт – в диалоговом окне «Вставить ссылку» (Insert Hyperlink) введите адрес веб-страницы в текстовом поле «Адрес» (Address).

    16. Продолжайте делать так, пока ваш сайт не будет готов!

    17. Вы хорошо потрудились. Однако не забывайте, о чем говорилось во введении к данной статье.

    Советы

    • Сделайте свой сайт привлекательным с помощью разнообразных фотографий, ссылок и информации.
    • Назовите страницы (за исключением главной) так, чтобы легче было запомнить.
    • Изучите HTML.
    • Получите хостинг. Никто не может увидеть ваш сайт, пока он не появится в интернете. Существуют бесплатные хостинговые сайты (это на самом деле простые ресурсы), а также профессиональные платные сервисы.
    • Присмотритесь в сети к некоторым простым веб-сайтам, которые соответствуют тому, что вы пытаетесь сделать. Хотя вы не можете сделать динамический сайт как WikiHow или MSN. com в Word или Publisher – нужны слишком расширенные настройки (PHP, Client-Site Includes, ASP.NET и многие другие).
    • Гораздо проще сделать сайт в Publisher, где представлены специальные веб-страницы дизайнеров.

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

    • Если вы планируете разместит свой сайт в интернете, будьте осторожны, чтобы не включить каких-нибудь личных данных, которые не намерены обнародовать в информации документа.
    • Как отмечено в заголовке статьи, создание HTML с помощью любого продукта Microsoft Office, кроме Expression Web, по большей части плохая идея. Тот факт, что программа может сохранять файл как HTML, не делает ее программным обеспечением для веб-дизайна.

    Что вам понадобится

    • Компьютер
    • Microsoft Office Word (все версии)

    Информация о статье

    Эту страницу просматривали 29 127 раза.

    Была ли эта статья полезной?

    Как сделать сайт в ворде

    Как сделать сайт в ворде (Word)

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

    Что нужно делать, чтобы создать сайт

    1. Запускам Word.

    2. Создаем меню.
    Можно сделать так: Главная | Моя музыка | О сайте

    Для этого, нажимаем «Вставка» — «Гиперссылка»
    В появившемся окне в поле «Текст» пишем текст нашей ссылки – например «О сайте», в поле «Адрес» пишем текстом index1.htm,

    Добавив текст, мы вставляем гиперссылки на старницу сайта

    (рисунок 1)

    Для других страниц пишем другие имена страниц — index2.htm, index3.htm, index4.htm или o-saite.htm, moia-musika.htm.

    3. Ниже меню печатаем основной текст.

    4. Вставляем рисунки.

    5. Сохраняем полученную страницу, нажимаем «Файл» — «Сохранить как», а далее очень важно, выбираем имя файла index, а тип файла htm – НЕ ОДНИМ ФАЙЛОМ!!!

    Сохраняем полученную страницу сайта

    (рисунок 2)

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

    Обратите внимание, если вы добавляли картинки, то вместе с веб страницей появится еще и папка images – в ней все вставленные вами рисунки.

    Рекомендации

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

    Спасибо за внимание.
    Автор: Титов Сергей

    Как создать книгу в формате HTML


    Узнайте, как создать книгу HTML, которая будет работать на всех устройствах, ПК, ноутбуках, планшетах и ​​телефонах.


    Сначала создайте простую HTML-страницу

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

    Мы объединим HTML и CSS, чтобы создать базовую книгу HTML.

    Первое начало со скелетом HTML:

    Пример


    Моя книга


    Моя книга


    Книга в формате HTML, созданная мной.


    Попробуй сам "

    Объяснение примера

    • Тип документа - HTML
    • Начало и конец документа
    • Начало и конец информации о документе
    • </code> Название книги («Моя книга») </li> <li> <code> <meta charset = "UTF-8"> </code> Используемый набор символов (UTF-8) </li> <li> <code> <body> </body> </code> Начало и конец видимого содержимого </li> <li> <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </code> Начало и конец заголовка </li> <li> <code> <p> </p> </code> Начало и конец абзаца </li> </ul> <p> Приведенный выше код представляет собой теги HTML.</p> Теги HTML <p> используются для определения содержания документа HTML.<img src='/800/600/https/thepresentation.ru/img/thumbs/3ff1e7d6aaf69b8af697e203d5a4a9db-800x.jpg' /> </p> <p> Теги начинаются с <code> <</code> (знак «меньше») и заканчиваются <code>> </code> (знак больше). </p> <p> Таким образом используются <code> <p> </code> и <code> </p> </code> чтобы отметить начало и конец абзаца. </p> <p> Чтобы быть полностью верным, в тег <code> <html> </code> должен быть добавлен атрибут языка для определения языка, на котором написана книга: </p> <p> Добавление следующей метаинформации заставит вашу книгу правильно отображаться на всех устройствах, ПК, ноутбуках, планшетах и ​​телефонах: </p> <p> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> </p> <h4><span class="ez-toc-section" id="i-13"> Пример </span></h4> <p> <head> <br/> <title> Моя книга



      Моя книга


      Книга в формате HTML, созданная мной.


      Попробуй сам "

      Создание таблицы содержания

      Внутри элементов добавьте таблицу содержания:

      Философия


      Содержание

      1. Метафизика


      2. Эпистемология


      3. Логика


      4. Этика


      5.Эстетика

      Попробуй сам "

      Добавьте немного стиля

      Добавьте таблицу стилей в свою книгу:

      Попробуй сам "

      Создать HTML-страницу для главы 1

      Файл: Философия_chapter1.htm

      1. Метафизика

      Природа реальности.

      Метафизика - это часть философии, изучающая природу реальности.

      Если мы посмотрим вокруг, мы увидим:



        < li> Природа
      • Животные

      • Люди

      • Дома

      • Машины

      • и многое другое.

      Реальна ли эта виртуальная реальность?

      В метафизике вопрос:



      • Что на самом деле?

      • Действительно ли то, что мы видим?

      • Есть ли нечто большее, чем мы видим?

      • Есть ли нечто большее, чем мы видим?

      • Есть еще что-нибудь?

      • Есть что-то еще?

      • Есть ли другое измерение?


Попробуй сам "

Добавить ссылку на главу 1

Философия


Содержание

1. Метафизика


2. Эпистемология


3. Логика


4. Этика


5. Эстетика

Попробуй сам "

В приведенном выше примере мы назвали первую главу книги:

" философия_chapter1.htm ".

Имя решать вам. Может быть, это следует назвать «Метафизикой».

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

"философия_капер2.htm "
"философия_chaper3.htm"
"философия_chaper4.htm"
"философия_chaper5.htm"


Добавить ссылку на каждую главу

Философия


Содержание


1. Метафизика


2. Эпистемология


3. Логика


4. Этика


< a href = "философия_chapter4.htm"> 5. Эстетика

Попробуй сам "

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

Так и следовало отреагировать!

Действительно, для кода 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 ... вы увидите, это очень интересно !!

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

Как создать HTML-страницу

Файл HTML - это просто текстовый файл, сохраненный с расширением.html или .htm расширение.

Начало работы

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

Итак, приступим к созданию вашей первой HTML-страницы.

Создание вашего первого HTML-документа

Давайте рассмотрим следующие шаги. В конце этого руководства вы создадите HTML-файл, который отображает сообщение «Hello world» в вашем веб-браузере.

Шаг 1. Создание файла HTML

Откройте текстовый редактор вашего компьютера и создайте новый файл.

Совет: Мы рекомендуем вам использовать Блокнот (в Windows), TextEdit (в Mac) или другой простой текстовый редактор для этого; не используйте Word или WordPad! Как только вы поймете основные принципы, вы можете переключиться на более продвинутые инструменты, такие как Adobe Dreamweaver.

Шаг 2. Введите HTML-код

Начните с пустого окна и введите следующий код:

  


     Простой HTML-документ 


    

Привет, мир!

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

Теперь сохраните файл на рабочем столе как «myfirstpage.html ".

Примечание: Важно указать расширение .html - в противном случае некоторые текстовые редакторы, такие как Блокнот, автоматически сохранят его как .txt .

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

Расшифровка кода

Вы можете подумать, что это за код. Что ж, давайте узнаем.

  • Первая строка - это объявление типа документа. Он сообщает веб-браузеру, что этот документ является документом HTML5. Регистр не учитывается.
  • Элемент - это контейнер для тегов, который предоставляет информацию о документе, например, тег </code> определяет заголовок документа.</li> <li> Элемент <code> <body> </code> содержит фактическое содержимое документа (абзацы, ссылки, изображения, таблицы и т. Д.), Которое отображается в веб-браузере и отображается для пользователя. </li> </ul> <p> Вы узнаете подробно о различных элементах HTML в следующих главах. А пока просто сосредоточьтесь на базовой структуре HTML-документа. </p> <p> <strong> Примечание: </strong> Объявление DOCTYPE появляется в верхней части веб-страницы перед всеми другими элементами; однако само объявление doctype не является тегом HTML.Каждый документ HTML требует объявления типа документа, чтобы гарантировать правильное отображение ваших страниц. </p> <p> <strong> Совет: </strong> Теги <code> <html> </code>, <code> <head> </code> и <code> <body> </code> составляют базовый скелет каждой веб-страницы. Содержимое внутри <code> <head> </code> и <code> </head> </code> невидимо для пользователей за одним исключением: текст между тегами <code> <title> </code> и <code> , который отображается как заголовок на вкладке браузера.


    HTML-теги и элементы

    HTML написан в виде HTML-элементов, состоящих из тегов разметки. Эти теги разметки являются фундаментальной характеристикой HTML. Каждый тег разметки состоит из ключевого слова, заключенного в угловые скобки, например , , , </code>, <code> <p> </code> и т. Д.</p> HTML-теги <p> обычно идут парами, например <code> <html> </code> и <code> </html> </code>. Первый тег в паре часто называется открывающим тегом (или начальным тегом), а второй тег называется закрывающим тегом (или конечным тегом). </p> <p> Открывающий тег и закрывающий теги идентичны, за исключением косой черты (<code>/</code>) после открывающей угловой скобки закрывающего тега, чтобы сообщить браузеру, что команда выполнена. </p> <p> Между начальным и конечным тегами вы можете разместить соответствующее содержимое.Например, абзац, который представлен элементом <code> p </code>, будет записан как: </p> <pre> <code> <p> Это абзац. </p> <! - Абзац с вложенным элементом -> <p> Это <b> еще один </b> абзац. </p> </code> </pre> <p> Вы узнаете о различных элементах HTML в следующей главе.</p> <h2><span class="ez-toc-section" id="HTML_File_Extension_-_html"> HTML File Extension - Что такое файл .html и как его открыть? </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <h3><span class="ez-toc-section" id="i-29"> Тип файла Файл языка гипертекстовой разметки </span></h3> <h3><span class="ez-toc-section" id="_HTML-9"> Что такое HTML-файл? </span></h3> <p> Файл HTML содержит язык гипертекстовой разметки (HTML), который используется для форматирования структуры веб-страницы. Он хранится в стандартном текстовом формате и содержит теги, определяющие макет страницы и содержимое веб-страницы, включая текст, таблицы, изображения и гиперссылки, отображаемые на веб-странице.Файлы HTML широко используются в Интернете и отображаются в веб-браузерах. </p> <p> Дополнительная информация </p> <p> </p> <p> HTML-файл открыт в Adobe Dreamweaver CC 2017 </p> <p> HTML был представлен в 1991 году Тимом Бернерсом-Ли и другими инженерами CERN как способ интерпретации и отображения веб-страниц в веб-браузерах. С момента своего выпуска он стал стандартом веб-разработки и претерпел множество изменений, включая HTML 2 (1995 г.), HTML 3 (январь 1997 г.), HTML 4 (декабрь 1997 г.) и HTML 5 (2014 г.).</p> <p> Язык разметки содержит элементы HTML, которые используются для построения структуры веб-страниц. Обычно каждый элемент включает открывающий тег, заключенный в угловые скобки (<tag>), и закрывающий тег, заключенный в угловые скобки, но с косой чертой перед тегом (</tag>). </p> <p> Вот некоторые примеры основных элементов: </p> <ul> <li> <head> - тег заголовка, используемый для содержания метаданных о веб-странице </li> <li> <body> - Тег тела, определяющий тело веб-страницы </li> <li> <h2><span class="ez-toc-section" id="-_-_-_-_-_-_-_-_-_-_-_-_-_CSS_JavaScript_CSS_JavaScript_CSS_JS_-_HTML_-_HTML_-_-_-_HTML_-_-_HTML-_-_-_Google_Chrome_Windows_-_Google_Chrome_Mac_-_Mozilla_Firefox_-_Microsoft_Edge_-_Apple_Safari_-_-_html_-_php_asp_HTML_indexhtml_-_HTML-_-_-_httpwwwsampledomaincom_-_httpwwwsampledomaincomindexhtml_defaulthtml_-_-_Windows_Microsoft_IIS_HTML_HTML_-_Microsoft_Visual_Studio_Code_-_Adobe_Dreamweaver_-_-_HTML_HTML_Microsoft_Notepad_Windows_Apple_TextEdit_Mac_-_-_HTML_-_Google_Chrome_Microsoft_Edge_Mozilla_Firefox_Apple_Safari_Mac_iOS_HTML_File_Viewer_Plus_HTML_08122020"> - Тег текстового заголовка, используемый для создания текстового заголовка на веб-странице </li> <li> <p> - Тег абзаца, используемый для определения абзаца на веб-странице </li> <li> <img> - Тег изображения, используемый для встраивания изображения на веб-страницу </li> <li> <ul> - Неупорядоченный список для создания маркированного списка на веб-странице </li> <li> <div> - Тег-разделитель, используемый для создания раздела на веб-странице </li> </ul> <p> Со временем для улучшения веб-страниц были введены другие веб-технологии, такие как каскадные таблицы стилей (CSS) и JavaScript.Скорее всего, вы найдете код CSS или JavaScript или ссылки на файлы .CSS или .JS на современных веб-страницах HTML. </p> <p> Веб-разработчики часто создают и редактируют файлы HTML, а затем загружают их на веб-серверы, которые веб-браузеры анализируют, когда пользователь посещает веб-страницы. Если вы обычный пользователь Интернета, вы, скорее всего, не увидите исходный код HTML, поскольку он анализируется веб-браузером в фоновом режиме. </p> <p> Однако вы по-прежнему можете просматривать HTML-код веб-страницы в веб-браузере, выполнив следующие действия: </p> <ul> <li> Google Chrome (Windows) - выберите </li> <li> Google Chrome (Mac) - выберите </li> <li> Mozilla Firefox - выберите </li> <li> Microsoft Edge - выберите </li> <li> Apple Safari - выберите </li> </ul> <p> <b> ПРИМЕЧАНИЕ: </b> Большинство страниц статических веб-сайтов имеют расширение.html, а страницы динамических веб-сайтов могут иметь расширение .php или .asp. </p> <p> Общие имена файлов HTML </p> <p> <b> index.html </b> - основной или индексный HTML-файл, загружаемый, когда клиентский веб-браузер запрашивает каталог веб-сервера. Например, когда запрашивается http://www.sampledomain.com/, веб-сервер загружает http://www.sampledomain.com/index.html по умолчанию, если только он не настроен на использование другого файла. </p> <p> <b> default.html </b> - индексный файл, часто используемый веб-серверами Windows, такими как Microsoft IIS.</p> <h3> Как открыть файл HTML? </h3> <p> Вы можете открывать и редактировать файлы HTML с помощью различных редакторов исходного кода и приложений для веб-разработки. Microsoft Visual Studio Code (мультиплатформенный) - полезный редактор исходного кода, а Adobe Dreamweaver (мультиплатформенный) - популярное приложение для веб-разработки. </p> <p> Поскольку язык HTML сохраняется в виде обычного текста, вы также можете открывать и редактировать файлы HTML с помощью обычного текстового редактора, такого как Microsoft Notepad (Windows) или Apple TextEdit (Mac). Однако эти текстовые редакторы не имеют функций, включенных в редакторы исходного кода и приложения для веб-разработки, которые упрощают программирование разработчиками.</p> <p> Вы можете предварительно просмотреть веб-страницу HTML, открыв ее в веб-браузере, таком как Google Chrome (многоплатформенный), Microsoft Edge (многоплатформенный), Mozilla Firefox (многоплатформенный) или Apple Safari (Mac и iOS). </p> <p> СКАЧАТЬ БЕСПЛАТНО </p> Открывайте и просматривайте файлы .HTML с помощью File Viewer Plus. <h3> Программы, открывающие файлы HTML </h3> <p> Обновлено 08.12.2020 </p> <h2><span class="ez-toc-section" id="-_-_-_-_-_-_-_-_-_-_-_-_-_CSS_JavaScript_CSS_JavaScript_CSS_JS_-_HTML_-_HTML_-_-_-_HTML_-_-_HTML-_-_-_Google_Chrome_Windows_-_Google_Chrome_Mac_-_Mozilla_Firefox_-_Microsoft_Edge_-_Apple_Safari_-_-_html_-_php_asp_HTML_indexhtml_-_HTML-_-_-_httpwwwsampledomaincom_-_httpwwwsampledomaincomindexhtml_defaulthtml_-_-_Windows_Microsoft_IIS_HTML_HTML_-_Microsoft_Visual_Studio_Code_-_Adobe_Dreamweaver_-_-_HTML_HTML_Microsoft_Notepad_Windows_Apple_TextEdit_Mac_-_-_HTML_-_Google_Chrome_Microsoft_Edge_Mozilla_Firefox_Apple_Safari_Mac_iOS_HTML_File_Viewer_Plus_HTML_08122020"> Как создать индексный файл </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> Создание индексного файла необходимо любому, кто планирует запустить веб-сайт.Индексный файл - это первая веб-страница, которую увидит любой посетитель вашего веб-сайта, и он должен быть назван «index.htm» или «index.html», чтобы веб-браузеры могли его найти. Если вы просто загружаете страницы на свой веб-сайт без предварительного создания индексного файла, ваши посетители могут увидеть (в зависимости от браузера и хоста вашего веб-сайта) либо страницу с сообщением о том, что сайт «припаркован», индекс с деревом файлов, показывающим страницы вы загрузили, или даже сообщение об ошибке. </p> <p> Щелкните кнопку «Пуск». В поле «Поиск» введите «блокнот." Нажмите Ввод." Примечание. Вы также можете найти Блокнот, щелкнув «Все программы», щелкнув «Стандартные», а затем щелкнув «Блокнот». </p> <p> Введите «<html>.» Нажмите «Enter» и введите «</html>». В этих двух тегах вы будете писать все, что хотите, в своем индексном файле. </p> <p> После «<html>» нажмите «Enter», создав пустую строку между ним и «</html>», который вы ввели ранее. Здесь вы войдете в несколько дополнительных частей вашего сайта. Введите «<head>» и нажмите «Enter».Теперь введите «<title>». После этого укажите название вашего сайта. Это не будет отображаться в окне браузера. Вместо этого он будет отображаться в строке заголовка (то есть, когда вы посещаете такую ​​страницу, как «Google.com», в строке заголовка отображается «Google»). Теперь введите и нажмите «Enter». Введите «» и нажмите «Enter».

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

    My Great Web Site

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

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

    Советы

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

    This is My Great Website.

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

    .

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

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

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

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

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

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

    1. Создание вашей первой страницы

    Глава 1. Создание вашей первой страницы

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

    Технически веб-страница - это особый тип документа, написанный на компьютерном языке, который называется HTML (это сокращение от HyperText Markup Language).Веб-страницы написаны для веб-браузеров - таких программ, как Internet Explorer, Google Chrome и Safari. У этих браузеров простая, но чрезвычайно важная задача: они читают HTML в документе веб-страницы и отображают идеально отформатированный результат, который вы можете прочитать.

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

    HTML: язык Интернета

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

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

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

    Примечание

    Стандарт HTML не имеет ничего общего с тем, как веб-браузер извлекает страницу в Интернете. Эта задача возложена на другой стандарт, называемый HTTP (HyperText Transport Protocol), который представляет собой коммуникационную технологию, позволяющую двум компьютерам обмениваться данными через Интернет.Если использовать аналогию с телефонным разговором, то телефонные провода представляют собой протокол HTTP, а пикантные сплетни, которыми вы обмениваетесь с тетей Мартой, - это документы HTML.

    Взлом Открытие файла HTML

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

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

    Текстовый редактор позволяет вам создавать или редактировать HTML-файл (в окне, подобном тому, которое вы видите на Рисунке 1-1 внизу).Даже многие профессиональные веб-дизайнеры придерживаются простых инструментов для редактирования текста. Существует множество более изящных инструментов редактирования, разработанных специально для редактирования веб-сайтов, но на самом деле вам не нужно ни одного из них. И если вы начнете использовать их слишком рано, вы, скорее всего, в конечном итоге утонете в море дополнительных изысков и функций, прежде чем действительно поймете, как работает HTML.

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

    Тип используемого вами текстового редактора зависит от операционной системы вашего компьютера:

    • Если у вас компьютер Windows, вы можете использовать простой редактор Notepad. Переходим к следующему разделу.

    • Если у вас компьютер Mac, вы используете встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже.

    Поклонникам Mac необходимо настроить способ работы TextEdit, потому что программа имеет «представление HTML», которое скрывает теги в файле HTML и вместо этого показывает отформатированную страницу. Такое поведение направлено на упрощение жизни новичков, но представляет серьезную опасность для всех, кто хочет написать настоящую веб-страницу. Чтобы избежать путаницы и убедиться, что вы пишете настоящий, необработанный HTML, вам необходимо отключить просмотр HTML.Вот как это сделать:

    1. Выберите TextEdit Настройки .

      Откроется окно с вкладками параметров TextEdit (рис. 1-2).

      Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа).

    2. Щелкните «Новый документ», а затем в разделе «Формат» выберите «Обычный текст».

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

    3. Нажмите «Открыть и сохранить» и включите первый параметр «Отображать файлы HTML как HTML-код вместо форматированного текста».

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

    4. Закройте окно настроек, а затем закройте TextEdit .

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

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

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

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

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

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

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

    В следующем списке описаны самые популярные браузеры на сегодняшний день:

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

      Загрузите Google Chrome на www.google.com/chrome.

    • Internet Explorer - это самый долговечный браузер и официальный стандарт во многих корпоративных и правительственных средах. Кроме того, это браузер, который предустановлен в Windows, поэтому его используют люди, не являющиеся техническими специалистами, если они не хотят (или не знают, как) устанавливать что-то новое.Даже горячие веб-дизайнеры должны убедиться, что Internet Explorer понимает их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными.

      Чтобы загрузить самую последнюю версию Internet Explorer, посетите www.microsoft.com/ie.

      Рисунок 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый из основных браузеров, варьируется в зависимости от того, какие сайты вы просматриваете и как вы подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Чтобы узнать текущую статистику использования браузера, посетите http: // tinyurl.com / stats-browsers.)
    • Firefox начал свою жизнь как современный ответ на Internet Explorer. Он по-прежнему впереди всех со своими невероятно гибкими надстройками , крошечными программами, которые другие люди разрабатывают для улучшения Firefox с дополнительными функциями, такими как уведомление о веб-почте и эскизы сайтов, которые отображаются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно поддерживает Firefox в актуальном состоянии.

      Попробуйте Firefox на www.mozilla.org / firefox.

    • Safari - это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. В таких продуктах Apple, как iPhone, iPad и iPod Touch, также используется браузер Safari (хотя и в мобильной версии, которая ведет себя немного иначе). Прекрасные люди из Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari доступным только для Apple.

      Зайдите в Safari по адресу www.apple.com/safari.

    • Opera - это упрощенный и простой в установке браузер, который существует уже более десяти лет и служит противоядием от огромных размеров и бессмысленных излишеств Internet Explorer.В течение многих лет Opera сдерживала неприятная деталь: если вы хотели версию без рекламы, вам нужно было заплатить. Сегодня Opera бесплатна и не содержит рекламы, как и другие браузеры из этого списка. У него немного, но преданных последователей, но он занимает пятое место в рейтинге веб-браузеров.

      Посетите Opera на сайте www.opera.com.

    Учебное пособие: создание файла HTML

    Теперь, когда вы подготовили свою веб-кухню, вы готовы создать свою собственную веб-страницу. В этом руководстве вы создадите базовую страницу, показанную на рис. 1-1.

    Совет

    Как и все учебные пособия в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с названием Tutorial-1-1 (что означает «Глава 1, первое руководство», если вам интересно).

    Готовы начать? Вот что нужно сделать:

    1. Запустите текстовый редактор .

      На компьютере под управлением Windows это Блокнот. Чтобы открыть Блокнот, нажмите кнопку «Пуск», введите «блокнот», а затем щелкните появившийся значок Блокнота.

      На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit.

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

    2. Начните писать свой HTML-код .

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

       

      United Popsicle Workers Union

      Мы боремся за ваши права.

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

    3. Когда вы закончите свою веб-страницу, выберите Файл Сохранить .

      Появляется окно «Сохранить» или «Сохранить как», в котором вы вводите данные для нового файла (рис. 1-5).

      Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML.

    4. Выберите место для сохранения файла и дайте ему имя popsicles.htm .

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

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

      Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы - текстовые файлы, содержащие HTML-контент.

      Примечание

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

    5. При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 .

      Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в «Блокноте» вам нужно выбрать UTF-8 в списке «Кодировка» внизу окна «Сохранить как».

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

    6. Нажмите «Сохранить», чтобы сделать его официальным .

      Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать .htm или .html вместо .txt , стандартного текстового файла; нажмите "Использовать .htm". В Блокноте такой шаг не требуется. Однако вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»).

    7. Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) .

      Если вы используете расширение .htm или .html, открыть страницу обычно так же просто, как дважды щелкнуть имя файла.Или вы можете перетащить файл веб-страницы в открытое окно браузера.

      Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если вы видите в адресе «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите просто обычный локальный адрес файла (в середине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу, где показано расположение файла в Chrome).

    8. По окончании редактирования закройте текстовый редактор .

      В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора.

    Подсказка

    Вот уловка, которая поможет вам открыть HTML-файлы в спешке. Найдите свой файл, затем щелкните его правой кнопкой мыши (на Mac щелкните, удерживая клавишу Control), и выберите «Открыть с помощью». Откроется список программ, которые можно использовать для открытия файла.Щелкните Блокнот (или TextEdit) в списке, чтобы открыть новое окно текстового редактора и открыть файл HTML одним махом.

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

    Просмотр HTML действующей веб-страницы

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

    Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. После перехода на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотр исходного кода» или «Просмотр исходного кода страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы.

    Если вы используете Safari на Mac, вам нужно перепрыгнуть через лишнюю петлю, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав Safari → «Настройки» → «Дополнительно», а затем установите флажок «Показать меню разработки в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать исходный код страницы».

    Подсказка

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

    Большинство веб-страниц значительно сложнее, чем пример popsicles.htm , показанный на рис. 1-1, поэтому вам нужно пройти через гораздо больше HTML-тегов, когда вы смотрите на разметку веб-страницы. Вы также, вероятно, найдете густую чащу кода JavaScript, набитого в верхней части страницы, лишенного всех пробелов и почти невозможного для чтения. Но даже если разметка выглядит чушью, не паникуйте. К тому времени, когда вы дочитаете эту книгу, вы сможете просмотреть груду HTML-кода, чтобы найти интересующие вас фрагменты.Фактически, профессиональные веб-разработчики часто используют технику просмотра исходного кода, чтобы проверить работу своих конкурентов.

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

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

    Тег можно узнать по угловым скобкам, двум специальным символам, которые выглядят следующим образом: <> . При создании тега вы вводите HTML-код между скобками. Этот код предназначен только для обозревателя; веб-посетители никогда его не видят (если только они не используют команду «Просмотр исходного кода» для просмотра HTML-кода). По сути, код - это инструкция, которая передает браузеру информацию о том, как отформатировать следующий текст.

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

     Этот текст не полужирный.  Этот текст выделен жирным шрифтом. 

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

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

     Не жирный шрифт.  Обратите внимание!  Теперь мы вернулись к нормальной жизни. 

    Какой браузер отображает как:

    Это не жирный шрифт. Обратите внимание! Теперь мы вернулись к нормальной жизни.

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

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

    Примечание

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

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

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

    Рисунок 1-7.Чтобы получить полужирный текст, вам нужно начать с правильного контейнера. Это элемент .

    Примечание

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

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

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

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

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

    Примечание

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

    На рис. 1-8 показаны два типа элементов в перспективе.

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

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

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

     Это word  выделено полужирным шрифтом и курсивом. 

    Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом:

    Это слово выделено полужирным шрифтом и курсивом.

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

     Это word  выделено курсивом и полужирным шрифтом.

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

     Это word  выделено курсивом и полужирным шрифтом. 

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

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

    Примечание

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

    Общие сведения о документах HTML

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

    Определение типа документа

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

    Спустя годы правила HTML (и CSS, стандарт таблиц стилей, о котором вы узнаете в главе 3) были формализованы. Используя эти новые правила, каждый браузер может отображать одну и ту же страницу одинаково. Но это изменение вызвало серьезную головную боль для старых браузеров, таких как Internet Explorer, которые пережили темные века HTML.Он должен был каким-то образом поддерживать новые стандарты, сохраняя при этом возможность правильно отображать существующие веб-страницы, включая те, которые основывались на старых особенностях.

    Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете этот факт, добавляя код, называемый определением типа документа (DTD) или doctype , который идет в самом начале вашего HTML-документа (рис. 1-9).

    Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы.

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

    Но когда браузер встречает HTML-документ, у которого нет документа, все ставки отключены. Internet Explorer, например, переключается в ужасный режим quirks , где он пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры ведут себя по-разному, когда вы просматриваете страницу без документа. Скорее всего, вы получите текст разного размера, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания.

    В прошлом веб-дизайнеры использовали разные типы документов для обозначения разных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный документ HTML5:

      

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

    Для сравнения, вот более многословный тип документа для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах:

      

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

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

    Примечание

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

    Теперь вы готовы заполнить остальную часть веб-страницы.

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

    Этот элемент обертывает все (кроме документа) на вашей веб-странице.

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

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

    Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы:

     
    
    
    ...
    
    
    ...
    
     

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

    Когда у вас есть скелет HTML, вам нужно добавить еще два элемента контейнера в смесь.Для каждой веб-страницы требуется элемент </code>, который находится в разделе заголовка страницы, и вам необходимо создать контейнер для текста в разделе <code> <body> </code> страницы. Один универсальный текстовый контейнер - это элемент <code> <p> </code>, который представляет абзац. </p> <p> Вот элементы, которые вам нужно добавить: </p> <dl> <dt> <code> <title> </code> </dt> <dd> <p> Этот элемент устанавливает заголовок для вашей веб-страницы. В названии играет несколько ролей.Сначала веб-браузеры отображают его на вкладке браузера или в верхней части окна браузера. Во-вторых, когда посетитель делает закладку на вашей странице, браузер использует название в качестве метки закладки. В-третьих, когда ваша страница появляется в веб-поиске, поисковая система обычно отображает этот заголовок в качестве первой строки результатов, за которым следует фрагмент контента со страницы. </p> </dd> <dt> <code> <p> </code> </dt> <dd> <p> Обозначает абзац. Веб-браузеры не делают отступы между абзацами, но они добавляют небольшой интервал между последовательными абзацами, чтобы они оставались разделенными.</p> </dd> </dl> <p> Вот веб-страница с этими двумя новыми ингредиентами (выделены жирным шрифтом): </p> <pre> <! DOCTYPE html> <html> <head> <strong> <code> <title> Все, что я знаю о веб-дизайне

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

    Рисунок 1-10.Когда браузер отображает веб-страницу, он показывает заголовок страницы на вкладке браузера или в верхней части окна. Но учтите: название не всегда подходит.

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

    Учебное пособие: создание полного HTML-документа

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

    Подсказка

    Как и все учебные пособия в этой книге, вы можете найти решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-2 (сокращение от «Chapter 1, second tutorial»). По мере того, как вы создаете эту страницу, добавляя список, изображение и заголовки, она проходит несколько итераций.Учебные файлы включают отдельный файл для каждого этапа улучшения.

    Независимо от того, какую страницу вы хотите создать, вы всегда начинаете одинаково:

    1. Запустите текстовый редактор .

      Это Блокнот или TextEdit.

    2. Введите скелет HTML в новый файл .

      Это doctype, корневой элемент и два основных раздела каждой веб-страницы: и .Выглядит это так:

       
      
      
      
      
      
       

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

    3. Добавьте заголовок в раздел .

      Добавьте элемент </code> в новую строку между открывающим тегом <code> <head> </code> и закрывающим тегом <code> </head> </code>: </p> <pre> <strong> <code> <title> Hire Me!

    4. Добавьте свой контент в раздел .

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

       
      
      
          Найми меня!   
      
      
         

      Меня зовут Ли Пак.Наймите меня в свою компанию, потому что мой рабочий номер с легкостью .

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

    5. Сохраните HTML-файл как резюме .htm и откройте его в веб-браузере .

      Если ваша страница отображается правильно (см. Рис. 1-11), вы можете быть уверены, что у вас хорошее начало.

    Рисунок 1-11. Добро пожаловать в Интернет. На этой странице не так много полезных функций HTML (и Ли, вероятно, не получится нанять), но она представляет собой одну из самых простых HTML-страниц, которые вы можете создать.

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

    Когда вы начнете создавать более подробные веб-страницы, вы быстро обнаружите, что создание страницы не так просто, как, скажем, создание страницы в Microsoft Word. Например, вы можете решить улучшить страницу резюме, создав список навыков. Вот разумная первая попытка:

     
    
    
     Наймите меня! 
    
    
    

    Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Мои навыки включают: * Быстрый набор текста (почти 12 слов в минуту). * Невероятная заточка карандашей. * Изобретательское оправдание. * Ведение переговоров с мировыми офицерами.

    Проблема возникает, когда вы открываете этот, казалось бы, невинный документ в своем веб-браузере (рис. 1-12).

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

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

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

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

    Чтобы исправить пример резюме, вам нужно использовать больше элементов абзаца и два новых элемента контейнера:

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

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

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

    Вот исправленная веб-страница (показанная на рис. 1-13), где структурные элементы выделены жирным шрифтом:

     
    
    
     Наймите меня! 
    
    
       

    Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот .

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Придумывание оправданий изобретательности.
    • Ведение переговоров с мирными офицерами.

    Рисунок 1-13. При наличии правильных элементов (как показано в коде на этой странице) браузер понимает структуру вашего HTML-документа и знает, как его отображать.

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

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

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

    Рисунок 1-14. Вот еще один способ взглянуть на созданный вами HTML-код. Модель дерева показывает, как вы вкладываете элементы HTML. Следуя стрелкам, вы увидите, что элемент верхнего уровня содержит элементы и .Внутри элемента находится элемент </code>, а внутри элемента <code> <body> </code> - два абзаца и маркированный список с четырьмя элементами. Если вы посмотрите на модель дерева достаточно долго, вы поймете, почему HTML называет все эти элементы «элементами контейнера». </p> <p> Если вы мазохист, вам не нужно использовать пробелы. Предыдущий пример в точности эквивалентен следующему гораздо менее читаемому HTML-документу: </p> <pre> <! DOCTYPE html> <html> <head> <title> Hire Me!

    я Ли Парк.Наймите меня в свою компанию, потому что моя работа без шума .

    Мои навыки:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательность поиск оправданий.
    • Ведение переговоров с мирными офицерами.

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

    Где все картинки?

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

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

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

    Хотя в главе 4 вы узнаете все, что когда-либо хотели знать о веб-графике, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам понадобится готовое для Интернета изображение. (Наиболее часто поддерживаемые типы файлов изображений - это JPEG, GIF и PNG.) Если у вас нет изображения, вы можете загрузить образец изображения leepark.jpg из папки Tutorial-1-2. Вот пример элемента , который использует файл leepark.jpg :

      Lee Park Portrait  

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

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

    Пример включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей - имени (которое сообщает браузеру, что делает атрибут) и значения (части информации, которую вы предоставляете). Имя первого атрибута - src , что является сокращением от слова «источник»; он сообщает браузеру, где взять нужное изображение. В этом примере значение атрибута src равно leepark.jpg , что является именем файла с изображением Ли Пака.

    Имя второго атрибута - alt , что является сокращением от «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait».

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

     
    
    
     Наймите меня! 
    
    
    

    Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Lee Park Portrait

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательное придумывание оправданий.
    • Ведение переговоров с мирными офицерами.

    На рис. 1-15 показано, где именно заканчивается изображение.

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

    Примечание

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

    10 наиболее важных элементов (и еще несколько)

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

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

    Примечание

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

    Некоторые элементы, такие как элемент

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

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

    Таблица 1-1. Основные блочные элементы.

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ТИП ЭЛЕМЕНТА

    ОПИСАНИЕ

    903

    Контейнер

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

    ,

    ,

    ,

    ,
    ,

    Заголовок

    Контейнер

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

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


    Горизонтальная линия (или горизонтальная линия на языке HTML)

    Автономный

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

      ,

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

    Контейнер

    Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить

      на
        , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

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

    Таблица 1-2. Базовые строчные элементы.

    4

    03

    03 84

    03

    Полужирный и курсив

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ТИП

    ОПИСАНИЕ

    ОПИСАНИЕ

    Контейнер

    Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически означает «текст другим голосом», а означает «стилистически смещенный текст», и есть способы изменить применяемое форматирование, как вы увидите в главе 3. Но в реальном мире почти все веб-разработчики ожидают, что означает курсив, а означает жирный шрифт.)


    разрыв строки

    Автономный

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

    Изображение

    Автономный

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

    Якорь

    Контейнер

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

    Чтобы образец резюме выглядел более респектабельно, вы можете использовать несколько ингредиентов из таблиц 1-1 и 1-2. На рис. 1-16 показана измененная версия веб-страницы, в которую добавлены некоторые новые элементы.

    Рисунок 1-16. Этот HTML-документ с большим количеством заголовков, списков и горизонтальной линией добавляет немного больше стиля резюме.

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

     
    
    
       Наймите меня! 
    
    
      

    Наймите меня!

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

    Незаменимые навыки

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательное придумывание оправданий.
    • Ведение переговоров с мирными офицерами.

    А еще я знаю HTML!

    Предыдущий опыт работы

    У меня долгая и блестящая карьера в самых разных профессиях. Вот некоторые основные моменты:

    • 2008-2009 - работал машинисткой в ​​ Flying Fingers
    • 2010-2013 - Выполнение передовых веб-дизайнеров в Riverdale Ферма
    • 2014–2015 гг. - отмечен в главе 1 книги Создание веб-сайта: The Отсутствует руководство

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

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *