Ваня создал свою первую html страницу допиши расширение созданного ваней файла
В этом уроке, Вы по моей инструкции создадите свою первую веб-страницу. Пока что Вам не надо вникать что за непонятные символы придется использовать. В этом уроке мы создаем страницу, а в следующих двух уроках мы полностью разберемся в каждом написанном символе.
Первое что мы делаем, это создаем папку на рабочем столе и даем ей название «Сайт». В этой папке будет проходить все наше дальнейшее творение.
Теперь запускаем блокнот Notepad++ который мы установили. (Если Вы этого еще не сделали, то инструкция по установке здесь). По умолчанию программа должна быть по директории /Program Files/Notepad++/, либо можно запустить через Пуск. Открыли программу и вставляем в нее следующий текст:
<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
Здравствуйте! Это моя первая веб-страница!
</body>
</html>
Далее, нажимаем в верхнем меню кнопку "Кодировки" и выбираем "Кодировать в UTF-8"
Большинство сайтов рунета состоят из страниц html написанных на кодировке UTF-8. Для того чтобы наши страницы корректно отображались в браузере, мы тоже будем использовать данную кодировку.
Приступим к созданию страницы HTML
1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.
2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как.
Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с .html на конце, например index.html
Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить. Готово!
Часто задают вопрос о том, что не видно расширения файла. Разберём по порядку
Расширение имени файла - это последовательность символов, добавляемых к имени файла и предназначенных для идентификации типа (формата) файла. Проще говоря, это .txt .doc .exe .jpg и тд в конце названия файла |
Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать) сменить не только расширение, но и следовательно тип файла (например, с txt на html)
Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:
Смотрим настройки файлов и папок:
3) вставляем в него Весь код (вместе с комментариями), указанный ниже:
4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.
В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:
Рисунок 1.
На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:
В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.
Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.
Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете
Все отступы слева перед тегами в примерах Необязательны. Они сделаны для наглядности, чтобы Вы видели пары тегов |
Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы
Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).
В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:
Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее
Хочу выделить текст жирным, а этот уже курсивом
Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!
5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad), либо установленный Вами другой текстовой редактор.
В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении - будем вставлять изображения, делать ссылки и много другого интересного)
Скелет HTML
3). Пропишите код
Опираясь на стандартную схему-скелет HTML, прописываем в «Блокнот» вот такой код (вы можете скопировать код и вставить в блокнот):
4). Сохраните документ
Сохраните документ как «index.html» .
Для этого в меню блокнота нажмите «Файл» => «Сохранить Как» :
Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мои опыты с HTML» .
В поле «Имя файла» напишите index.html (а не просто index , это важно). Таким способом мы создаем файл с расширением *.html для веб-страниц. Далее нажмите на кнопку «Сохранить» :
В папке «Мои опыты с HTML» появиться файл под названием «index» , нажмите на него двойным щелчком мыши или откройте этот файл через любой браузер, например, Internet Explorer. Вот такой результат вы должны увидеть на мониторе компьютера:
Теперь разберем код по косточкам .
Я думаю, вы заметили, что текст, который находится между тегами , отобразился во вкладке браузера, а все, что находится между тегами
здесь текст , отобразилось на экране монитора:P.S. Хочу еще раз напомнить о парных тегах, которые нуждаются в закрытии, например:
- открываем HTML документ
- закрываем HTML документ (закрывается тег знаком « / »)
и теги-одиночки, которые не нуждаются в закрывающей паре:
Я бы еще выразился так, что парные теги – это условный контейнер, внутри которого могут находиться другие теги, текст, картинки и т.д.
Для лучшего понимания моих слов, рекомендую глянуть на графическую схему, где я показал, как действуют парные теги:
Обратите внимание, тег, который открывается первым должен закрыться последним, второй - предпоследним и т.д.
Это правильное закрытие парных тегов, а теперь давайте посмотрим, как нельзя закрывать парные теги:
Обратите внимание, правильное закрытие тегов нарушено. Такое закрытие парных тегов может привести к фатальным ошибкам, то есть, страница будет отображаться неправильно. Так что, будьте внимательны, когда пишите парные теги.
В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.
Вы готовы? Тогда поехали!
Подключение к интернету для создания страницы на html нам НЕ нужно.
Нам понадобится
1) Выбираем текстовой редактор. На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как)
2) для Mac и Linux
Bluefish Editor ( скачать )
2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla, Google Chrome, Opera, Yandex и Mail браузеры и тд.
Теперь нужно сохранить наш файл в формате html.
Не забываем, что Notepad++, это текстовый редактор, а это значит, что на данный момент мы имеем обычный текстовый файл с набором символов. Для того чтобы наш браузер отображал созданную нами текстовую страницу как веб-страницу, нам нужно сделать из нее файл с расширением html.
Для этого нажимаем в верхнем меню кнопку "Файл", затем "Сохранить как", выбираем директорию (путь) куда будет сохранен файл, сохраним его в созданной нами папке: Рабочий стол/Сайт/, далее самое главное, выбираем нужный тип файла, в нашем случае это Hyper Text Markup Language (html).
Как это все работает, мы разберем в следующих уроках.
* Когда нам нужно будет открывать файл для редактирования, будем нажимать правой кнопкой мыши на файл и выбирать "Edit with Notepad++" (открыть с помощью Notepad++).
Теперь мы попробуем приветствовать мир.
Прежде чем мы действительно начнём изучение следующей главы нам надо решить один вопрос. Терминология:
Это всё возможные синонимы, которые можно употребить к тому или иному веб-проекту.
К множеству подстраниц на одном ресурсе я буду стараться применять сайт, ресурс. К одной единственной странице на сайте я буду обращаться как страница, документ или страница сайта.
- Создаём рабочую папку
- В папке создаём файл “first-page.html”
- Если у вас проблемы с созданием файла с расширением html, то попробуйте создать этот файл с помощью запроса в google “как создать html файл”.
- Рекомендую параллельно к этому пособию вообще нагугливать термины и объяснения из альтернативных источников. А вдруг я не прав, а вдруг всё уже поменялось?
- Открываем в редакторе вашего выбора наш файл.
- И пишем в нём ручками код.
helloworld
Сохраняем наш файл и открываем с помощью браузера. Если всё пошло так, то мы в Chromo-подобном браузере мы увидим:
helloworld в хромиуме
А в интернет эксплорере скорее всего:
helloworld в IE
И мы сразу же можем начинать ругать IE потому что он неправильно отображает страницы. Ну или дядю Андрея, потому что он специально не дал ещё одну строчку.
Мы добавляем её так, что бы она оказалась седьмой. Вот так:
helloworld с UTF
Сохраняемся и проверяем в Интернет Эксплорере наш файл заново:
Проверка страницы в IE
Давайте начнём с конца. это то, что должно стоять в вашем HTML коде всегда. Это указание браузеру, что на странице используется не только английская кодировка. Существует множество разных кодировок кроме utf-8. Пока можете не углублять свои познания и просто пишите это строчку всегда.
То что IE-7 в итоге отобразил нашу страшненькую страницу, не значит, что мы его простили. Я держу его только для того, что бы посмотреть время от времени какой oн ужасный. Раз мы уже коснулись браузеров - вам придётся поставить маленький зоопарк: Chrome, Firefox, Safari, Opera. Хотя с большего и хром, и опера, и фаерфокс это один и тот же браузер. Ну почти. Движок у них общий - chromium. этот зоопарк нужен для проверки работоспособности ваших приложений(web-apps) в различных ситуациях.
- это на самом деле 3 указания. Во-первых, мета обозначает, что сейчас пойдёт указание для браузера, которое не видно пользователю. Чисто техническая информация. Во-вторых, идёт указание о роде технической информации - charset. И, в-третьих, уже значение чарсета utf-8.
Но вернёмся к написанному.
- говорит браузеру, что сейчас начнётся документ написанный в HTML5. Браузер не обладает интеллектом и ему надо говорить, что он должен делать. И именно доктайп говорит, что сейчас надо отображать документ формата HTML, HTML5. Да именно в версии 5. Существуют различные доктайпы. Вот так мог выглядеть доктайп для четвёртого хтмл
- всегда будет для вас (мастеров HTML5) одинаков, неизменяем и всегда пишется в первой строке.
один раз открывает код страницы и один раз закрывает. Между открывающим и закрывающим тегом html мы и пишем весь код нашей страницы.
Сам html разбит на две части head и body - голова и тело.
Мы будем возвращаться к голове и телу ещё не один раз. Ну, во-первых, без них нельзя сделать ни одну страницу. А во-вторых некоторые последующие теги привязаны только к “голове” или только “телу”.
Закрытие и открытие этих тегов проходит, как и у тега html. И мы можем учить новое слово Структурные элементы страницы. Их много больше, одни можно вкладывать в другие, так же как подъезд дома вложен в сам дом, а этаж в подъезд, а квартира вложена в этаж. Комната в квартиру, стол в комнате, а компьютер на столе, при этом стол не может быть в проходе, либо в рабочий кабинет, либо в коридоре, нельзя его оставить в дверях.
Абсолютно точно так же как и эта аллегория работает структура веб страницы эдакая матрёшка. Один элемент вложен в другой.
Должен признать. Я вас обманул. Всё это не так просто. Но вот до этой строчки был порог вхождения. Если вы всё поняли, представили и разобрались до этого момента, то дальше точно будет легко и просто. Обещаю!
Купились? Не будет. Нет ничего лёгкого даже в этом языке разметки. Мир меняется каждый день, все новые приборы, безбарьерный интернет, новые технологии - всё это накладывает отпечаток на наши веб страницы. Этих элементов и правда не много - сотня. Ещё с какое-то количество атрибутов к ним, ну как charset и их значений. Но с каждым из них реально надо разобраться, посмотреть примеры, применить в практике и запомнить. Не слушайте тех, кто скажет, что редакторам или блогерам HTML не нужен - это миф. Это как фехтовальщику не нужна техника владения мечом - просто руби сверху вниз. Каждый кто связан по работе с веб страницами - обязан хотя бы один раз ознакомится с возможностями этого самого HTML.
Но мы отвлеклись - едем дальше!
Голова, то есть head в него мы вложили ещё title. У тайтла тоже есть открывающий и закрывающий тег. И внутри него мы разместили текст.
- Этот текст отображается в самом тайтле браузера или в закладке браузера, где открыта наша страница. Если закладок много, то текста пользователь скорее всего не увидит.
- Но это тот же текст, который по дефoлту(default - стандартно) подставляется при внесении страницы в закладки. Попробуйте.
- Это тот текст, который может быть виден пользователю в результатах поиска в Google.
Отсюда мораль - тайтл должен быть продуманным, если это рецепт борща, то я бы рекомендовал написать там “Рецепт борща - 12 шагов”. Если это первая страничка на уроке HTML - то наверное есть смысл написать там “My first HTML-page - HelloWorld !”. Или то что считаете нужным, например “qwerty” вы же теперь вебмастер знающий основы HTML - вам и решать.
Title размещается только внутри тега head. Title поддерживает “Global Attributes” - глобальные атрибуты (мне надо было похвалиться своим прекрасным знанием английского языка). Ссылку на список этих атрибутов я приведу внизу статьи, но самостоятельно вы его можете нагуглить уже сейчас, например этой магической фразой “global attributes w3c”. W3C - это консорциум всемирной паутины, проще говоря боги этого вашего интернета. Про них можно нагуглить в Википедии. Я вас всё время куда-то посылаю не потому что мне лень об этом написать. Просто если я буду писать про все детали - я никогда не закончу. Моя задача научить вас HTML-грамоте. Дополнительные, интересные и полезные материалы часто будут как ссылка в гугл.
Но давайте сконцентрируемся и перейдём к тому, что мы написали в body, мы открываем и закрываем теги 4 раза: H1, _ article_, p и q.
H1 - это заголовок всей страницы видимой пользователю. Очень часто H1 это название самого сайта или название статьи на нём (рецепта, видео, заметки). Вы заметили, что я написал H1 с большой? Мы ведь договорились писать всё с маленькой. Не забываем быть последовательными. h1 - браузеру всё равно, а вот читающему код человеку не всегда.
article - вся статья помещается внутри этого тега. Если на странице две статьи, то article будет или должен быть использован дважды. Как вы понимаете, желаемое и действительное не всегда одно и то же.
p - отмечает начало и конец абзаца. Зачем? Ну например, что бы текст начинался с красной строки или каждый нечётный абзац помечался бы другим оттенком, или… или… Вариантов использования для чего множество. Например транслировать на сайте в блоке “Интересные мысли” случайные абзацы редакторов сайта.
q - короткая цитата или прямая речь. Очень удобно красиво выделять мысли в тексте. И кстати именно это пример малоизвестного тега, который входит в список “ай зачем их всех учить”. Забегая вперёд скажу, что если есть короткая цитата, то будет и длинная :).
Что мы должны были заметить кроме этого, что вложенный тег должен сначала закрыться сам, прежде чем можно закрывать тег родитель.
Щас скажу прямую речь
Сначала мы должны закончить прямую речь и закрыть тег q и только потом закрыть родительский тег. Смотрим как мы это сделали в примере.
Щас скажу прямую речь
только абзац новый начну
Принципиально, азы HTML мы только что прошли. На самом деле теперь вы можете всем говорить, что вы знаете и понимаете структуру HTML. Вот тот пример мы теперь всё время и будем изменять. Добавлять все новые теги в него и смотреть как он изменяется. Каждый тег мы сейчас будем проходить как маленькую главу и рассматривать примеры применения. Но сначала я вам расскажу про CSS.
Сначала будем делать руками, потом я попробую объяснить, что мы сделали.
Создаём в той же папке, где у нас лежит наш хтмл исходник, новый файл с названием style.css
Редактируем наш html файл и добавляем туда строчку . Строчка должна быть вложена в head страницы, так как это информация не для человека, а для браузера. Этим самым мы говорим, где считывать стили страницы.
В сам css файл вносим:
Сохраняемся и проверяем наш результат в браузере. У нас должно было получится примерно следующее:
опера css
Ещё раз код и текст, который лежит в нашей html странице
Мы указали каждый тег в стилях и сказали как его отображать.
Для всего body в фигурных < >скобках мы указали цвет бэкграунда. Цвет мы указали в общепринятой 16-ричной системе исчисления. Эту систему обозначают буквами HEX - hexadecimal или система исчисления с базисом 16. Если вы не знаете, что это такое, то коротко скажу, что мы используем систему с базисом 10 и считаем до десяти, вебдизайнеры считают до 16. Подробнее про неё можно (но не обязательно) загуглить в Яндексе - “Шестнадцатеричная система счисления”.
Для заголовка(h1) мы указали цвет букв, размер букв и тип и свойства шрифта.
Для абзаца(p) мы провели такую же операцию только с другими значениями, как и для тайтла. И обратите внимание, и там и там мы указали цвет “английскими словами”, а не значениями HEX. Существует табличками с заданными названиями для пары сотен HEX значений. Её точно наизусть учить не надо, но эти значения удобно использовать например в протоколировании страницы.
И наконец для короткой цитаты (q) мы просто поменяли цвет.
Принципиально всё. Вы только что изучили введение в CSS. Дальше мы будем тоже просто изменять и пробовать улучшить наши страницы и изучать, что можно сделать с помощью HTML и CSS, а что нет.
Пока можете стереть некоторые значения или даже добавить свои. Внести article в css со своими значениями и попробовать сделать конфликт, например указав разные цвет, размер для шрифтов артикля и абзаца, и посмотреть кто победит.
Про CSS мы должны знать только, что это стили. Стили пишутся в отдельном файле. Все теги можно описать по отдельности, могут быть не описаны. Для него фронтендера это примерно минимальный базовый уровень.
Всем привет. Возможно, вам в первом уроке не все было понятно, так как это был теоретический урок. В этом уроке мы перейдем к практическим занятиям. После этого урока вы сможете с легкостью самостоятельно создать простую веб-страницу.
Приступим.
Шаг 1
Создайте на компьютере папку с названием «Моя первая веб-страничка на HTML» (или назовите папку по-своему, это не важно, главное, чтобы была папка).
Шаг 2
Теперь откройте текстовый редактор Notepad++ или блокнот
«Пуск» => «Программы» => «Стандартные» => «Блокнот» и скопируйте или перепишете туда такой код:
Шаг 3
Сохраните этот текстовый документ с кодом в папку, которую вы создали (у меня папка, как вы помните, называется «Моя первая веб-страничка на HTML»).
Чтобы правильно сохранить веб-страницу, сделайте такие действия:
○ нажмите в блокноте «Файл» => «Сохранить Как»:
○ назовите файл index.html (а не просто index ). У вас должен получится файл с расширением *.html а не *.txt .
Внимание: сохраняйте файл веб-страницы как *.html, а не как *.txt , в противном случае это работать не будет.
Вот и все. Только что вы создали вашу первую веб-страницу.
Чтобы посмотреть результат работы откройте файл index.html в браузере.
Вот такой результат вы должны увидеть на экране монитора:
Заметка:
Теперь разберемся, как это оно так получилось
Вы заметили, что все находящееся между тегами
. , отобразилось на экране монитора,а все, что находилось между тегами , отобразилось во вкладке браузера.
Если у вас все получилось так же, переходим к следующему уроку «Работа с текстом в HTML». Урок-3
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2
Всем привет!
В сегодняшнем уроке мы попробуем вместе создать первую страничку на HTML. Благодаря практическому уроку, вы сможете понять всю теорию, которую я упоминал в уроке №1, а также попробую все проделанное изложить по полочкам.
Итак, для работы нам понадобиться стандартный текстовый редактор «Блокнот» . Кто не знает, где искать «Блокнот» , пишу:
на вашем компьютере снизу в левом углу есть кнопка «Пуск» , нажмите на нее.
Далее выберите «Все программы» => «Стандартные» => «Блокнот» .
А теперь попробуем создать первую веб-страницу. Следуйте данным пунктам:
1). Откройте блокнот
2). Создайте папку
На вашем компьютере создайте папку под названием «Мои опыты с HTML» . В эту папку вы будете сохранять все файлы, сделанные по курсу изучения основ HTML.
Теперь вспомним скелет HTML из урока №1.
Читайте также: