Основы HTML для начинающих – «Моя первая страничка на HTML» . Урок №2
Главная » Основы HTML » Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2
Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2
Всем привет!
В сегодняшнем уроке мы попробуем вместе создать первую страничку на HTML. Благодаря практическому уроку, вы сможете понять всю теорию, которую я упоминал в уроке №1, а также попробую все проделанное изложить по полочкам.
Итак, для работы нам понадобиться стандартный текстовый редактор «Блокнот». Кто не знает, где искать «Блокнот», пишу:
на вашем компьютере снизу в левом углу есть кнопка «Пуск», нажмите на нее.
Далее выберите «Все программы» => «Стандартные» => «Блокнот».
А теперь попробуем создать первую веб-страницу. Следуйте данным пунктам:
1). Откройте блокнот
2). Создайте папку
На вашем компьютере создайте папку под названием «Мои опыты с HTML». В эту папку вы будете сохранять все файлы, сделанные по курсу изучения основ HTML.
Теперь вспомним скелет HTML из урока №1.
Скелет HTML
3). Пропишите код
Опираясь на стандартную схему-скелет HTML, прописываем в «Блокнот» вот такой код (вы можете скопировать код и вставить в блокнот):
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
[Посмотреть результат]
4). Сохраните документ
Сохраните документ как «index.html».
Для этого в меню блокнота нажмите «Файл» => «Сохранить Как»:
Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мои опыты с HTML».
В папке «Мои опыты с HTML» появиться файл под названием «index», нажмите на него двойным щелчком мыши или откройте этот файл через любой браузер, например, Internet Explorer. Вот такой результат вы должны увидеть на мониторе компьютера:
Теперь разберем код по косточкам .
<html> — открываем HTML документ.
<head> — открываем голову HTML документа.
<title> — открываем заголовок.
Моя первая HTML-страничка на StepkinBlog.ru
</title> — закрываем заголовок.
</head> — закрываем голову HTML документа.
<body> — открываем тело HTML документа.
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</html> — закрываем HTML документ.
Я думаю, вы заметили, что текст, который находится между тегами <title>здесь текст</title>, отобразился во вкладке браузера, а все, что находится между тегами <body>здесь текст</body>, отобразилось на экране монитора:
P.S. Хочу еще раз напомнить о парных тегах, которые нуждаются в закрытии, например:
<body> — открываем HTML документ
</body> — закрываем HTML документ (закрывается тег знаком «/»)
и теги-одиночки, которые не нуждаются в закрывающей паре:
<br> -перенос строки.
Я бы еще выразился так, что парные теги – это условный контейнер, внутри которого могут находиться другие теги, текст, картинки и т.д.
Для лучшего понимания моих слов, рекомендую глянуть на графическую схему, где я показал, как действуют парные теги:
Также хочу направить ваше внимание на правильность написания парных тегов:
<тэг1><тэг2><тэг3> … </тэг3></тэг2></тэг1>
Обратите внимание, тег, который открывается первым должен закрыться последним, второй — предпоследним и т.д.
Это правильное закрытие парных тегов, а теперь давайте посмотрим, как нельзя закрывать парные теги:
<тэг1><тэг2><тэг3> … </тэг3></тэг1></тэг2>
Обратите внимание, правильное закрытие тегов нарушено. Такое закрытие парных тегов может привести к фатальным ошибкам, то есть, страница будет отображаться неправильно. Так что, будьте внимательны, когда пишите парные теги.
Предыдущая запись
Cкелет HTML. Основы HTML для начинающих. Урок №1
Следующая запись
Знакомство с CSS. Основы CSS для начинающих. Урок №1
HTML-уроки. Моя первая страница | Заметки программиста
Осваивать язык html лучше всего самостоятельно создавая интернет странички. Для начала определим где будут хранится файлы нашего сайта. Например, я на диске D: создам папку «HTML-уроки», в ней подпапку «Урок 1». В дальнейшем у нас будут добавляться еще подпапки для картинок, css и т.п.
Теперь открываем редактор (например Блокнот Windows или Nodepad++) и набираем в нем html-код:
<html> <head> <title> Урок 1 <title> </head> <body> <h2>Моя первая html-страничка</h2> <p>А это текст моей первой html-странички.</p> </body> <html>
<html> <head> <title> Урок 1 <title> </head><body> <h2>Моя первая html-страничка</h2> <p>А это текст моей первой html-странички.</p> </body> <html>
|
Теперь файл надо сохранить в нашу папку — жмем «Сохранить как…» -> «D:\HTML-уроки\Урок 1» и указываем имя index.html или index.htm Какая разница html с htm? Разница между html и htm в единственной лишней букве расширения имени файла. Больше распространено именно html, но ничто не мешает сокращать по своему усмотрению. Такое расширение происходит от полного названия языка гипертекстовой разметки – Hyper Text Markup Language. Последнее слово опускается, и получается htm.
После того как файл сохранен мы можем посмотреть нашу первую страничку открыв его в браузере.
Давайте теперь разберемся что мы написали в нашем файле index.htm:
- Тег <hеаd> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую на веб-странице, за исключением тега.
- Тег <titlе> определяет заголовок документа.
- Тег <bоdy> предназначен для хранения содержания веб-страницы (контента).
- Теги <Н1>, <Н2>, <Н3>, <Н4>, <Н5>, и <Н6> это заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Тег <Н1> наиболее важный заголовок первого уровня, а <Н6> является наименее значительным.
- Тег <р> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой.
Похожие записи
codernote.ru
Учебник HTML 5. Статья «Создание первой страницы»
В этом учебнике для создания HTML файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.
Рассмотрим, как вы будете создавать свой первый HTML файл с использованием программы Notepad++.Шаг 1: Откройте текстовый редактор
Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.
Перед Вами откроется основное окно программы:
Рис. 2 Текстовый редактор Notepad++.Шаг 2: Напишите несколько HTML тегов
<!DOCTYPE html> <!-- декларация сообщает, что в этом документе используется пятая версия HTML --> <html> <!-- корневой элемент HTML документа (все остальные элементы должны быть его потомками) --> <head> <title>Моя первая страница</title> <!-- обеспечивает название для документа --> </head> <body> <!-- описывает видимое содержимое страницы --> <h3> Это заголовок </h3> <!-- описывает заголовок второго уровня --> <p>Это параграф.</p> <!-- определяет параграф (абзац) --> </body> </html> <!--закрывающий элемент (после него не должно быть каких-либо элементов) -->
Давайте разберем по частям, что мы сделали в этом примере:
- Объявили декларацию <!DOCTYPE html>, которая определяет тип документа и сообщает браузеру, что необходимо интерпретировать код на языке HTML 5.
- Добавили элементы <html> и </html>, которые определяют границы нашего HTML кода. Обращаю Ваше внимание, что после закрывающего тега </html> не должно быть никаких элементов.
- В заголовочной части (от слова голова) нашего документа (между тегами <head> и </head>) мы разместили элементы <title> и </title>, которые определяют наименование нашей страницы — «Моя первая страница». Наименование страницы, которое вы указали отображается на вкладке любого браузера.
- В теле нашей страницы, элементы <body> и </body> мы разместили заголовок второго уровня (<h3>) и абзац (<p>). Еще раз обращаю Ваше внимание, что видимое содержимое страницы помещается между тегами <body> и </body>.
В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег <!— … —>, текст внутри такого элемента не отображается браузером. Подробно использование комментариев мы рассмотрим далее в учебнике в статье «Комментарии и якоря».
Код HTML нашего примера в редакторе Notepad++:
Рис. 3 Пример создания HTML документа.Шаг 3: Сохраните HTML страницу
Чтобы сохранить файл на вашем компьютере как HTML документ выберите в редакторе Файл > Сохранить как (либо сочетание Ctrl-Alt-S).
Вы можете не искать в списке тип файла, а сразу указать название файла с разрешением html. Назовите файл «index.html» и файл автоматически сохранится как HTML документ в кодировке UTF-8.
Допускается выбрать любое понравившееся вам имя документа, на данном этапе обучения это не имеет значения. Справочно: заглавные страницы сайтов, как правило, называют index.*. Это связано с тем, что отсутствует необходимость изменять конфигурацию файла веб-сервера, установленную по умолчанию.
После того как Вы сохранили ваш текстовый документ как HTML файл, редактор начинает выделять весь HTML код цветом (визуализация кода) — это одно из основных достоиноств текстовых редакторов
Окно сохранения в редакторе Notepad++:
Рис. 4 Сохранение текстового файла как HTML документ.Шаг 4: Просмотр HTML страницы в браузере
Откройте Ваш сохраненный файл в браузере, результат должен выглядеть следующим образом:
Рис. 5 Пример отображения HTML документа в браузере.Если у вас некорректно отображается содержимое страницы, попробуйте изменить настройки кодировки Вашего браузера, необходимо указать, чтобы браузер проводил автоматически определение кодировки.
При создании собственного сайта в заголовочной части страницы необходимо обязательно указывать кодировку символов для текущего документа (подробнее об этом вы узнаете в конце учебника в статье «Метаданные в HTML»).
Изменение настройки кодировки в браузере Chrome:
Рис. 6 Пример настройки кодировки в браузере Chrome.Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив с текстовым файлом:
- Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 1.
Подсказка: используйте для первого заголовка на странице, тег заголовка первого уровня.
Обращаю Ваше внимание, что готовые практические примеры будут доступны для открытия в новом окне, но старайтесь выполнять их самостоятельно. Подглядеть код готовой страницы можно, используя инструменты разработчика, как правило, в любом браузере достаточно кликнуть правой кнопкой по странице и нажать на просмотр кода страницы, либо элемента:
Фрагмент страницы примера в инструментах разрабочика браузера Chrome.basicweb.ru
Создание простой web-страницы на HTML
Что такое HTML? Из описания: HTML — язык разметки гипертакста (или язык гипертекстовой разметки).
Так давайте познакомимся с ним поближе.
Для начала создайте у себя на компьютере файл с любым названием и расширением .html (название должно быть на английском языке — например index.html). Что бы создать такой файл — создайте обычный текстовый документ («Пуск» — «Все программы» — «Стандартные» — «Блокнот») и сохраните («Файл» — «Сохранить как») его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла — «Все файлы(*.*)»).
Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем — index.
При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).
Теперь откройте этот файл через блокнот и скопируйте туда такой код.
<html>
<body>
Это первая web-страница!
</body>
</html>Сохраните и откройте через браузер.
Поздравляю, вы только что создали свою первую web-страницу.
Текст «Это первая web-страница!» можете поменять на любой другой, например так — «Это моя первая web-страница!!!». сохраняем, обновляем браузер, любуемся результатом.
Но у нашей страницы нет загаловка.
Надо это исправить — немного подправим код, вернее добавим в него «Голову сайта», используя теги <head> и <title>.
<html>
<head>
<title>Первая страница</title>
</head>
<body>
Это моя первая web-страница!!!
</body>
</html>Сохраняем, обновляем, любуемся. Теперь у нашей страницы есть загаловок.
Пример здесь.
Описание тегов.
Самый первый тег это <html> (этот тег парный, т.е. закрывающий тег </html> обязателен) — он используется как контейнер, внутри которого находится все содержимое страницы (текст, изображения и прочее). Хотя этот тег (<html> и </html>) необязателен, но его использование говорит о правиле хорошего тона. Поэтому и вам советую его использовать.
Следующий тег — <head>. Это тоже парный тег (<head> и </head>). Этот тег не отображается на странице (кроме заголовка), но он необходим для указания дополнительный параметров страницы — описание страницы (используется поисковиками), ключевые слова (используется поисковиками), стили, скрипты, заголовок и прочее.
Тег <title> — парный тег (<title> и </title>), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега <head>!
И последний, в нашем коде, тег — <body>. Тоже парный тег (<body> и </body>), внутри которого находится вся видимая часть сайта, т.е. тексты, картинки, ссылки, в общем информация которую вы хотите разместить на сайте.
В следующем уроке мы поговорим о видах тегов и правило их написания.
Список уроков Описание тегов
in-sites.ru
Урок 1. Первая HTML-страница или начало большого пути
Самый длинный путь начинается с первого шага. Собственно, путь в сайтостроение начинается с первого созданного именно Вами документа, и этот документ – Ваша первая HTML страница. С него-то мы и начнем.
Для создания страниц можно использовать специализированные средства, такие как phpDesignerPro, Adobe Dreamweaver или SharePoint от Microsoft, но в большинстве случаев можно обойтись более простыми средствами, такими как стандартный Блокнот Windows или его расширенная версия – «Notepad ++».
Для начала создания первой страницы, открываем блокнот (Пуск-Стандартные-Блокнот), создаем новый документ и вносим код указанный в примере 1. Для создания структуры HTML документа в коде используются теги <html>, <head>, <body>, прописанные в угловых скобках (<…>). В большинстве случаев используются парные теги, первый из которых открывает значение, а второй – закрывает (закрывающий тег содержит «/»). Необходимо запомнить простые правила, чтобы создавать валидный (правильный) код с первого раза:
- Вся разметка страниц HTML проводится с использованием тегов.
- Почти все теги парные (открывающий и закрывающий), за исключением небольшого количества тегов форматирования текста.
- Все, что написано внутри пары тегов подчиняется правилам примененного тега, в том числе использование другого тега.
- Для удобства теги лучше располагать «лесенкой», т.е. подчиненные теги прописываются с некоторым отступлением от начала управляющего тега.
Что такое валидность кода HTML и как ее проверить, будет рассказано в следующем уроке.
Пример 1. Создание первой HTML-странички
<html>
<head>
</head>
<body>
Этот документ читается как HTML
</body>
</html>
Итак, первый документ создан. Теперь его необходимо сохранить, для чего используется команда «Сохранить как…», и при сохранении документа, ему присваивается любое имя (желательно на латинице) и вместо расширения .txt пишется .html или .htm. Это важно, поскольку файлы с расширением отличным от указанного не воспринимаются машинами как необходимый тип документа, и могут выполняться другими программами «по умолчанию».
После сохранения, Вы увидите файл со значком в виде странички. У меня установлен браузер Opera по умолчанию, поэтому значок выглядит так:
Открыв двойным кликом этот документ, мы увидим в браузере нашу первую страницу с текстом «Этот документ читается как HTML». Конечно, до сайта далеко, но мы только начинаем 🙂
Вторым шагом в создании документа HTML будет формирование «шапки» и «тела». Создается это также с использованием тегов <head> и <body>, следующими непосредственно друг за другом. На практике это выглядит так:
Пример 2 – голова и тело
<html>
Этот документ читается как HTML
<head>
Это шапка документа, не отображаемая пользователю.
</head>
<body>
Это – тело документа, которое будет виден пользователю.
</body>
</html>
Разделение на голову и тело можно сравнить с нервной системой человека. «Всем управляет голова» — выражение верное именно для HTML страниц, ибо в Голове находятся управляющие элементы, которым подчиняются элементы, заключенные в Теле документа.
Разбираться с деятельностью «Головы», мы, пожалуй, будем немного позже. Чтобы понять правила работы, сначала «поковыряемся» в Теле.
«Сначала было слово»… Вот, со слова начнем и мы. Для отображения на страницах используется текст, и форматирование текста – основная часть создания сайта. Вся последующая работа будет вестись в теге <body>
Для просмотра страницы открываем созданную страницу в своем браузере и одновременно открываем этот же документ редактором, т.е. блокнотом.
Пишем любой текст между тегами <body></body>, например, «Этот текст я хочу увидеть в окне браузера, потому что это первый мой документ».
Теперь придадим тексту красоты.
Для придания свойств тексту, таких как полужирный, курсив, подчеркнутый, применяются управляющие теги <i> </i>, <u> </u> и <b> </b>. Первый тег присваивает тексту курсивное начертание, второй – подчеркивание, третий – полужирное. А также применим тег «br» для разрыва строки. Код страницы будет выглядеть так:
<html>
<head>
</head>
<body>
Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера, </b> <br>потому что <i>это <b>первый</b> мой документ</i>
</body>
</html>
Сохраняем изменения и обновляем страницу в браузере. В результате, в браузере мы увидим:
Этот текст я хочу увидеть в окне браузера,
потому что это первый мой документ
Более подробно с тегами форматирования, мы продолжим знакомиться на следующих уроках.
Написание кода лесенкой, не принципиально, показанный выше пример можно разместить в одну строку (сплошным текстом), и результат будет такой же
<html> <head></head><body>Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера,</b> <br>потому что <i>это <b>первый</b> мой документ</i></body></html>
Но читать и редактировать такой код сложно, поэтому используется «лесенка» для лучшего восприятия и редактирования.
Специализированные программы, кроме Notepad ++, дают возможность просмотра результата в окне самой программы. Кроме того, можно открыть отредактированную страницу в браузере непосредственно из редактора. Для удобства пользования в специальных редакторах применяется синтаксическая подсветка кода и может использоваться набор стандартных HTML тегов для быстрой их вставки.
Список программ HTML-редакторов с кратким описанием их возможностей.
Notepad ++ — бесплатный редактор, заменяющий стандартный блокнот и дающие очень широкие возможности. Способен подсвечивать синтаксис многих языков программирования, в том числе и HTML, JavaScript, CSS, PHP.
phpDesigner 8 – достаточно мощная программа для верстки и программирования. Рекомендую использовать в дальнейшем. Приложение содержит готовые шаблоны страниц HTML, PHP и т.д. Вы так же можете создать свой шаблон. Способна подсвечивать синтаксис языков PHP, HTML, XHTML, CSS, JS, XML, SQL и многих других. Но еще одна важная особенность это автодополнение тегов, атрибутов, функций PHP и др. Из программы Вы можете сразу запустить проект и посмотреть результат.
Другие программы…
На выбор можете использовать и другие пакеты:
Adobe Dreamweaver – мощный пакет от Adobe, ранее приобретенный у Macromedia (той самой, которая когда-то активно внедряла Flash ролики и собственно была родоначальницей Flash). Пакет платный.
HTML Pad – поддерживает многие языки (HTML, VB, ASP, Perl и др.)
PSPad – еще одна бесплатная альтернатива блокнота, понимающая HTML, CSS
EditPlus – так же понимает большое кол-во синтаксисов, в том числе и HTML c CSS.
На этом пока все.
www.programm-school.ru
Урок 4: Создайте свой первый сайтrustutorial
После полученных в предыдущем уроке знаний вы уже через несколько минут создадите свой первый web-сайт.
Как?
В Уроке 1 мы узнали, что необходимо для создания web-сайта: браузер и Notepad (или аналогичная программа — текстовый редактор). Поскольку вы читаете этот текст, то ваш браузер уже открыт. Вам нужно открыть лишь дополнительное окно браузера (открыть браузер ещё раз), и вы сможете читать этот учебник и одновременно видеть ваш новый web-сайт.
Также откройте Notepad (в Accessories в Programs — Start menu):
Теперь мы готовы!
Что я могу?
Начнём с чего-нибудь попроще. Как насчёт страницы, на которой написано: «Ура! Это моя первая web-страница.» Читайте дальше, и вы узнаете, как это легко сделать.
HTML прост и логичен. Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст.
Во-первых необходимо сообщить браузеру, что вы будете «говорить» с ним на
языке HTML. Это делается тэгом <html> (тут ничего нового).
Так что, прежде чем напечатать что-либо, нужно поставить тэг «<html>»
в первой строке документа Notepad.
Как вы, возможно, помните из предыдущего урока, <html> это
открывающий тэг, который должен иметь и закрывающий тэг после того, как вы
закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг «</html>»
на пару строк ниже и вводите весь текст документа между <html> и </html>.
Следующее, что необходимо, это «head» (голова или «шапка»), которая содержит
служебную информацию о вашем документе, и «body» (тело), содержимое самого
документа. Поскольку HTML логичен, head (<head> и </head>)
находятся выше body (<body> и </body>).
Ваш документ теперь должен выглядеть так:
<html>
<head>
</head>
<body>
</body>
</html>
Обратите внимание, как мы структурировали тэги по строкам (с помощью клавиши Enter) и какие сделали отступы (клавишей Tab). В принципе не важно, как вы структурируете ваш HTML-документ. Но, для облегчения чтения кода, настоятельно рекомендуем структурировать ваш HTML с помощью перевода строк и отступов, как в нашем примере.
Вот вы уже и сделали вашу первую web-страницу — первенца, который, возможно, выглядит не так, как вы предполагали, когда начинали читать этот учебник, но это уже, в некотором роде, web-сайт. Вы создали базовый шаблон для всех последующих HTML-документ.
Ну ладно, но как мне добавить содержимое в мой web-сайт?
Как вы уже видели ранее, в вашем HTML-документе есть две части: а head и body. В разделе head вы вносите информацию о странице, а body содержит информацию самой страницы.
Например, если вы хотите дать название документу, чтобы оно появлялось в
верхней строке браузера, это нужно сделать в разделе «head». Тэг для названия — <title>:
<title>Моя первая web-страница</title>
Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами «body».
Итак, мы хотим, чтобы на странице выводилось «Ура! Это моя первая страница.» Этот текст, который вы хотите показать, и, естественно, он должен располагаться в разделе body. Поэтому в разделе body напечатайте следующее:
<p>Ура! Это моя первая страница.</p>
Буква p в <p> это сокращение от «paragraph» и означает
именно это — параграф текста.
Ваш HTML-документ должен теперь иметь такой вид:
<html>
<head>
<title>My first page </title>
</head>
<body>
<p>Hurrah! This is my first page.</p>
</body>
</html>
Готово! Вы создали свой первый настоящий web-сайт!
Теперь нужно сохранить его на жёсткий диск, а затем открыть в вашем браузере:
- В Notepad выберите «Save as…» в меню «File».
- Выберите «All Files» в боксе «Save as type». Это очень важно — иначе вы сохраните файл как обычный текстовый документ, а не как HTML-документ.
- Теперь сохраните ваш документ как «page1.htm» (расширение «.htm» указывает, что это HTML-документ. «.html» даст тот же результат. Я всегда использую «.htm», но вы можете выбрать любое из этих двух расширений). Где вы сохраните документ на жёстком диске — не имеет значения, главное запомнить это место, чтобы потом легко найти файлы.
Теперь откроем браузер:
- Выберите «Open» в меню «File» (CTRL+O).
- Щёлкните «Browse» в появившемся диалоге.
- Теперь найдите ваш HTML-документ и щёлкните «Open».
Теперь вы должны увидеть страницу с текстом «Ура! Это моя первая страница.» в вашем браузере. Поздравляем!
Если вы хотите, чтобы весь мир увидел ваше творение, можете перейти в Урок 14 и вы узнаете, как выгрузить вашу страницу в Internet. Или наберитесь терпения и читайте дальше. Всё ещё только начинается.
<< Урок 3: Что такое HTML-тэги?
Урок 5: Что мы уже знаем? >>
ru.html.net
Как создать первую веб-страницу • Vertex Academy
Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
В этой статье вы получите подсказки и советы, после которых сможете создать свою первую веб-страницу. Абсолютно с нуля. Поэтому весь материал будет излагаться максимально подробно.
Все, что вам понадобится, это
- Текстовый редактор
- Браузер
В качестве текстового редактора можно использовать как обычный Блокнот, так и более продвинутые программы. Рассмотрим некоторые из них:
Текстовые редакторы
Блокнот – это стандартная программа ОС Windows. Чтобы создать документ в этом редакторе – кликните по рабочему столу правой кнопкой мыши, выберите «создать» «текстовый документ».
Notepad++ представляет собой по сути более продвинутый блокнот, но в нем есть подсветка HTML-синтаксиса, что делает чтение кода более удобным. Рекомендую использовать этот редактор в процессе обучения.
Чтобы скачать Notepad++ идем на их сайт и жмем «download». После завершения загрузки устанавливаем его на свой компьютер. Программа абсолютно бесплатна.
Также в него можно установить плагины, которые позволят избежать кучи ручной работы, но для начала нам нужно набить руку и написать сотни метров кода именно вручную, чтобы все лучше усвоилось. Поэтому о плагинах пока не думаем.
Помните, как в 1-м классе мы писали одну и ту же букву по несколько строк в специальных тетрадках в косую линию? 🙂 Считайте, что сейчас я прошу вас писать эти буковки, т.к. это улучшит ваше понимание и запоминание кода.
Sublime Text очень удобен тем, что подсказывает теги (автодополнение), сам делает отступы, закрывает теги и много чего другого. Словом, он очень упрощает работу над HTML-документом, но рекомендую использовать его позже, когда уже выучите хотя бы основные теги и поймете главные правила синтаксиса. Правда, если у вас не Windows, а другая операционка – ставьте сразу Sublime.
Здесь выбирайте подходящую вам систему и качайте. Программой можно пользоваться бесплатно, но, если вам захочется убрать надпись “unregistered” – придётся заплатить $70.
Браузер
Используйте любой на ваш вкус. Но большинство разработчиков для веб разработки используют именно Chrome, который имеет ряд инструментов, которые облегчают жизнь разработчика. Имейте в виду, что некоторые браузеры могут по-разному отображать один и тот же код, поэтому, когда дело дойдет до создания серьезного сайта – его нужно будет проверить во всех популярных браузерах.
Итак, с рабочим инвентарём мы определились.
Теперь создайте папку с любым названием, например, “HTML_Start” и в ней сохраните свой первый HTML-документ:
- Открываем Notepad++
- В левом верхнем углу жмём «Файл» — «сохранить как», выбираем нашу папку
- Называем файл «index.html», либо просто «index» и в строке «тип файла» выбираем Hyper Text Markup Language file.
- Жмём «сохранить».
Конечно, первый файл вы можете назвать как угодно, но предлагаю сразу учиться, как правильно.
Почему именно index.html?
Обычно мы заходим на сайт с главной страницы. Когда у сайта множество страниц, мы подсказываем веб-серверу, которую из них нужно загружать автоматически. В большинстве случаев, адрес сайта указывается кратко, без лишних файлов на конце. Сравните, vertex-academy.com и vertex-academy.com/index.html – это одна и та же страница, но мы конечно же напишем, как в первом варианте. Вот тогда браузер заходит в папку сайта и определяет файл, который нужно показать. Если index.html в этой папке отсутствует, тогда браузер покажет список всех файлов, которые лежат в этой папке.
Теперь мы наконец готовы создать свою первую веб-страницу.
Но прежде буквально пару слов о тегах
HTML-код всегда помещен между угловых скобок.
Например,
<tag_name> какой-то текст </tag_name>
<tag_name> какой-то текст </tag_name> |
это HTML-элемент, который сообщает браузеру какую-то информацию о тексте между тегами (в каком месте ему быть, как выглядеть и т.п.). Чаще всего теги парные – т.е. есть открывающий тег и закрывающий, где добавляется слеш перед именем тега:
<tag_name> открывающий тег </tag_name> закрывающий тег
<tag_name> открывающий тег </tag_name> закрывающий тег |
Бывают также непарные теги, о них расскажем попозже.
Ну давайте же скорее покодим! 😉
Каждый html-документ содержит набор определенных тегов. Эти теги, как Отче наш – запоминайте их, либо просто делайте ctrl+c, ctrl+v этой структуры каждый раз при создании нового HTML-документа
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> </head> <body> </body> </html> |
Давайте подробно разберем каждый из этих тегов.
или <!doctype html> , т.к. он не чувствителен к регистру — даёт понять браузеру, на которой из версий HTML написан документ.
Например, для версии HTML 4.01 этот элемент был таким:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> |
С версии 5 это объявление стало гораздо короче, что не может не радовать). Как видите, этот тег непарный.
Теперь, чтобы наглядней описать остальные, парные теги, давайте взглянем на них под другим углом.
Элементы – они наподобие контейнеров. Мы открываем коробочку (пишем тег), кладём в неё что-то и закрываем (пишем закрывающий тег).
Теги нужно обязательно закрывать. Зачастую браузеры делает нам медвежью услугу и, если мы забыли закрыть тег – сами закрывают его. Поэтому, допустив ошибку в коде, бывает: проверили в браузере, все красиво, профит! Но, браузер ведь пока не настолько умный, чтобы точно знать, где нужно закрыть тот или иной тег. Иногда он «угадывает». Если бы мы, например, забыли закрыть тег <head>, он бы сам закрыл его перед началом тега <body>, т.к. это стандартная структура документа. А когда речь идет о других тегах, тут уже сложнее и он может закрыть его совсем не там, где нужно и от этого «поедет» весь ваш документ. Поэтому, возьмите за правило:
При написании парных тегов удобно писать сразу открывающий и закрывающий теги, так вы ничего не забудете.
Давайте еще раз посмотрим на структуру документа:
Мы сознательно допустили ошибку на картинке. Найдете, где? 🙂
Здесь у нас появился еще один тег
Чтобы понять для чего он, давайте попробуем создать HTML-документ без него. Откройте через notepad++ наш сохраненный index.html и напишите код
<!DOCTYPE HTML> <html> <head> </head> <body> Моя первая веб-страница </body> </html>
<!DOCTYPE HTML> <html> <head> </head> <body> Моя первая веб-страница </body> </html> |
Выберите кодировку документа: «Кодировки» — «Преобразовать в UTF-8»
Теперь сохраните. Проще всего это делать либо нажатием клавиш ctrl+s, либо нажав дискетку в левом верхнем углу редактора. Запустите сохраненный index.html в браузере.
Та-дам, вы создали свою первую веб-страницу! 🙂
Но что это за текст на вкладке браузера? Это же путь к нашему файлу…длинно и некрасиво. Для того, чтобы назвать веб-страницу, существует тег <title>. Он всегда помещается внутри элемента <head>. Попробуем теперь с ним:
<!DOCTYPE HTML> <html> <head> <title>Название страницы</title> </head> <body> Моя первая веб-страница </body> </html>
<!DOCTYPE HTML> <html> <head> <title>Название страницы</title> </head> <body> Моя первая веб-страница </body> </html> |
Сохраните файл, обновите страницу, вуаля! У нашей страницы есть название)
Считается хорошим тоном писать каждый вкладываемый элемент с отступом (клавишей tab, двумя или четырьмя пробелами). В нашем примере <head> и <body> находятся внутри элемента <html>, поэтому они написаны с отступом от него. Элемент <title> вкладывается в <head>, поэтому делаем отступ от этого элемента. Если писать без отступа – браузер все поймет. А вот вы, написав простыню кода – вряд ли. А постороннему веб-разработчику тем более будет сложно разобраться в вашем коде.
Элемент <head>
Что еще можно поместить в голову документа? Туда обычно складывают информацию для поисковых роботов, счетчиков браузера, ключевые слова и прочая служебная информация. Кроме элемента <title>, пользователь не увидит ничего из написанного в <head>. Также есть один важный тег, который сообщает браузеру, в какой кодировке следует читать наш документ:
Мы уже установили нужную кодировку в блокноте, но желательно также сообщить браузеру об этом, потому что некоторые могут вас неправильно понять. Метатеги не нужно закрывать.
Давайте закрепим в памяти структуру нашего HTML-документа:
<!DOCTYPE HTML> <html> <head> <title>Название страницы</title> <meta charset=»utf-8″> </head> <body> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>Название страницы</title> <meta charset=»utf-8″> </head> <body> </body> </html> |
В дальнейшем мы будем показывать только код, содержащийся внутри <body>, но никогда не теряйте голову! 😉
Итак, со скелетом нашего документа мы разобрались. Давайте нарастим на него немножко мышц? 😉
Знакомьтесь, заголовки и абзац
<h2></h2>— Заголовок первого уровня, от английского Heading. По умолчанию выделяется браузером жирным шрифтом, размером 24 пункта. Несет смысловую нагрузку как самый главный заголовок на странице, зачастую название страницы. Именно по нему поисковые роботы идентифицируют страничку.
<h3></h3>— заголовок второго уровня, здесь по умолчанию шрифт меньше, чем в <h2>. Размер 18 п. Этим заголовком обозначают названия больших разделов, на которые делится страничка. Имеет меньший смысловой вес, чем h2.
И так далее, до…
<h6></h6> — заголовка шестого уровня. Этот заголовок имеет самый меньший смысловой вес. По умолчанию он имеет самый маленький шрифт.
<p></p> — абзац, от англ. Paragraph. Браузер автоматически добавляет расстояние между абзацами и напишет каждый с новой строки, при использовании нескольких тегов <p>
А теперь посмотрим, как всё это выглядит:
<body> <h2>Анекдот</h2> <p>Приходит веб-мастер к окулисту. Тот его усаживает напротив таблицы, берет указку: — Читайте пятую строчку! — «ИНШМК»… Доктор, что у вас с кодировкой?</p> </body>
<body> <h2>Анекдот</h2> <p>Приходит веб-мастер к окулисту. Тот его усаживает напротив таблицы, берет указку: — Читайте пятую строчку! — «ИНШМК»… Доктор, что у вас с кодировкой?</p> </body> |
Хм, вышло как-то не очень. Хоть мы и написали каждую фразу с новой строки, браузер почему-то этого не понял. Дело в том, что в HTML-коде пробелы не отображаются, и браузер интерпретировал все, что помещено в контейнер <p> как один абзац. А что если мы каждую фразу заключим в тег <p>?
Примечание: редактор ниже даёт вам возможность посмотреть код на вкладке HTML, увидеть готовый результат на вкладке Result и самим поиграться с кодом при клике на кнопку «Edit in JSFiddle»
Мы использовали несколько тегов <p>, и в итоге браузер написал каждый элемент с новой строки 🙂
Тег <br>
Существует еще тег <br> от англ. Break – разрыв. Это перенос на новую строчку. Кстати, это одиночный тег, его не нужно закрывать, т.к. он ничего в себе не содержит.
Давайте посмотрим, как выглядел бы текст, если бы мы не заключили каждую фразу в <p>, а поставили в конце фраз <br>
Тоже довольно читабельно, хотя нету интервала между каждой строкой, которые добавлялись при использовании нескольких <p>. В зависимости от того контента, который вам нужно написать – вам решать, каким способом лучше разделять текст.
Тег <pre>
Тег <pre> обозначает какое-то предварительное форматирование текста, чаще всего в формате Courier. Удобнее всего использовать его со стихами. Давайте посмотрим, как он работает:
Тег <hr>
На закуску, еще один тег, который используется для разрыва – тег <hr>. Он непарный, его не нужно закрывать, как и <br>. В основном он используется, чтобы разделить несколько разных по смыслу текстов (например, его уместно было бы применить между несколькими анекдотами). Хотя также он используется просто для визуального оформления страницы.
Мы выучили структуру HTML-документа и часто употребляемые теги. Дальше будем учиться наводить красоту на наших веб-страницах 🙂
Для тех, кто хочет еще детальней покопаться во всем этом, мы рекомендуем справочники:
webref.ru — это справочник по верстке на русском языке.
w3schools.com — это справочник на английском. Чем он ценен:
- Здесь поданы рекомендации от W3C, т.е. здесь самая корректная информация по HTML5
- Параллельно можно подтянуть свои знания английского, если они пока не совершенны 🙂
- Здесь есть упражнения для начинающих, где вы сразу же можете проверить правильность кода. Попробуйте, например, это упражнение
До встречи! 🙂
vertex-academy.com