Блог Тимура Казанского

Урок 1. Как создать HTML страницу?


В этом уроке мы подробно рассмотрим, как создать базовую html страницу, при этом я постараюсь изложить все максимально кратко и доступно для тех людей, которые вообще не знакомы с html. И так, вы сейчас читаете эту статью с помощью браузера, читаете, что-то еще, переходите по различным сайтам, но задумайтесь на секунду, как браузер отображает всю эту информацию? Возьмем статью, мы видим заголовок, отредактированный текст, наличие выделенных слов, колонку с текстом слева, вставленные картинками в тексте и так далее, но откуда браузер знает как отображать все это? Правильно! Все это делается с помощью языка html, именно он говорит браузеру, как отобразить и структурировать страницу. Давайте перейдем к практике и посмотрим, как выглядит html и как он управляет страницей! Для начала создадим простой текстовый файл на рабочем столе, нажимаем правую кнопку мыши на пустом месте рабочего стола( не на папках и файлах), переходим на пункт «Создать» и выбираем пункт «Текстовый документ», на вашем рабочем столе создастся текстовый документ, назовем его «site», теперь смотрим на название, если вы видите «site.txt», то щелкаем правой кнопкой мыши на нашем текстовом документе и выбираем пункт «переименовать», далее заменяем значение после точки «.txt» на «.html», т.е. должно выглядеть как site.html. Если вы видите просто «site», тогда делаем следующее: (пример для Windows7) открываем любую папку и в меню, наверху находим пункт «Упорядочить», нажимаем на него и выбираем пункт «Параметры папок и поиска», далее откроется окно, где выбираем вкладку «вид» и в меню «дополнительные параметры» находим пункт «скрывать расширения для зарегистрированных типов файлов» где снимаем галочку с пункта.

Снимаем галочку с пункта скрывать расширения для зарегистрированных типов файлов

Теперь возвращаемся к нашему файлу и видим наш файл с расширением «site.txt», который мы заменяем на «site.html». Делаем мы это для того, чтобы дать понять браузеру, что этот файл содержит код «html». Давайте теперь откроем этот файл, нажимаем правой кнопкой мыши на файле и выбираем пункт «открыть с помощью», где выбираем пункт «Блокнот». Если вы попытаетесь открыть файл напрямую двумя щелчками мыши, то у вас откроется браузер с пустой страницей, потому что в нашем блокноте пока еще ничего нет. А так как нам это не нужно и мы собираемся написать html-код, нам нужно открыть этот файл с помощью блокнота. Хорошо, мы видим перед собой открытый, пустой блокнот и теперь давайте создадим нашу первую html страницу, которая к примеру будет отображать анкету пользователя, с кратким описанием персональных данных, фотографией и «кратким рассказом о себе». Давайте посмотрим на код, который вам нужно будет ввести на html:

<html>
<head>
<title>Анкета пользователя - Иванова Ивана Ивановича</title>
</head>
<body>
<h1>Добро пожаловать на анкету пользователя!</h1>
<p>Ниже, вы можете прочитать персональные данные пользователя!</p>
<img src="photo.jpg" title="Фотография пользователя" alt="Фотография пользователя">
<lu>
<li><b>Имя:</b> Иван</li>
<li><b>Фамилия:</b> Иванов</li>
<li><b>Отчество:</b> Иванович</li>
</lu>
<h2>Краткий рассказ о себе</h2>
<p><em>Я родиля и живу в г.Москва</em>, работаю инженером, люблю путешествовать, обожаю живопись, книги и свою собаку!</p>
</body>
</html>

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

Пример созданной анкеты

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

<html>с этого тега начинается каждый файл html, он сообщает браузеру, что это начало кода.
<head>заглавие веб-страницы(от англ. head – голова)
<title>Анкета пользователя - Иванова Ивана Ивановича</title>название веб-страницы, оно дает понять пользователю и поисковым машинам, о чем эта страница.
</head>конец заглавия веб-страницы.
<body>основная часть страницы (от англ. body –тело)
<h1>Добро пожаловать на анкету пользователя!</h1>сообщает браузеру, что это заглавие.
<p>Ниже, вы можете прочитать персональные данные пользователя!</p>таким образом помечается абзац.
<img src="photo.jpg" title="Фотография пользователя" alt="Фотография пользователя">отображение картинку «photo.jpg» c описанием(атрибут title), в основном нужен для поисковых машин и атрибут alt – устанавливает также описание картинки при невозможности отобразить ее в браузере, вы можете это проверить – просто наведите курсор мыши на изображении.
<lu>сообщает браузеру о начале списка.
<li><b>Имя:</b> Иван</li>элемент списка содержит слово помеченное жирным шрифтом(<b>)
<li><b>Фамилия:</b> Иванов</li>элемент списка содержит слово помеченное жирным шрифтом(<b>)
<li><b>Отчество:</b> Иванович</li>элемент списка содержит слово помеченное жирным шрифтом(<b>)
</lu>сообщает браузеру о конце списка.
<h2>Краткий рассказ о себе</h2>сообщает браузеру что это подзаголовок.
<p><em>Я родиля и живу в г.Москва</em>, работаю инженером, люблю путешествовать, обожаю живопись, книги и свою собаку!</p>в абзаце используется курсивный шрифт (<em>)
</body>конец основной части(или тела) веб-страницы.
</html>сообщает браузеру о том, что здесь заканчивается html код.
Запомните следующее:
  • Тег – это элемент разметки, он состоит из имени элемента взятого в угловые скобки, например тег «<p>»
  • Элемент – это открывающий тег «<>» плюс содержимое плюс закрывающий тег «</>»
  • Атрибут – устанавливает дополнительную информацию об элементе, например:
<img src="photo.jpg" title="Фотография пользователя" alt="Фотография пользователя"> - «<img>»тег, а «src,alt,title» - атрибуты. Теги всегда должны закрываться, открыли тег заголовка <h1> обязательно закройте его - </h1>
  • Каждая страница содержит в себе следующие теги:
<html>
<head> - Тут указываются данные о страницы: название страницы, ссылки на стили, языки, кодировки и т.д.
<title></title>
</head>
<body> - Тут указывается код всей страницы, т.е. что мы обычно видим в браузере.
</body>
</html>

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

Категория: Уроки HTML для чайников

Читайте также - самые интересные истории обо мне

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

Комментарии: 0