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

Количество просмотров: 393

В данном уроке будет описано как создать самую простую html страницу не используя специальных программных средств будь то редакторы или браузеры. Если у вас установлена операционная система Windows, то нам будет достаточно блокнота и любого браузера. Это может быть Google Ghrome, Opera, Safari и т.д.

И так начнем. Для начала немного информации.

HTML (HyperText Markup Language) – язык гипертекстовой разметки. Именно HTML сообщает браузеру информацию необходимую для отображения web странички. Он поясняет браузеру, как располагать текст, где вставить картинку, или таблицу. Но как он это делает? Посмотрите на код приведенный ниже и подумайте, что и для чего используется.


<html>
	<head>
		<title>Моя первая страница</title>
	</head>
	<body>
		<h1>Привет мир!</h1>
		<img src=”logo.png”>
		<p> Меня зовут Маркус, и это моя <strong>первая</strong> html страничка.</p>
	</body>
</html>

Когда браузер считывает вашу html страницу, он преобразует теги которыми размечен основной текст страницы. Теги — это обычные символы, заключенные в угловые скобки, например, <title>, <h1>, <p> и т.д. Они не видны пользователю, но браузер прекрасно их видит и преобразует. Благодаря им вы можете сказать браузеру какой текст будет заголовком, где начинается новый абзац или какой текст выделить жирным. Это похоже на разметку документа в текстовых редакторах, только для разметки используются теги.

Пришло время посмотреть, для чего используются теги, заодно создадим свою первую html страницу.

  1. Откроем текстовый редактор Блокнот.
  2. Напишем в нем следующий код.
    
    <html>
    	<head>
    		<title>Моя первая страница</title>
    	</head>
    	<body>
    		<h1>Привет мир!</h1>
    		<img src=”logo.png”>
    		<p> Меня зовут Маркус, и это моя <strong>первая</strong> html страничка.</p>
    
    	</body>
    </html>
    
    
  3. Сохраняем наш файл через выбирая Сохранить как.
  4. В появившемся окне выбираем тип файла Все файлы(*), прописываем имя файла index.html и выбираем кодировку utf-8. Жмем сохранить.

  5. Заходим в папку в которую сохранили файл и запускаем его.
  6. На экране браузера должно отобразиться следующее:

  7. Первый html документ создан. Поздравляю. Теперь пришло время разобраться что-же мы сделали и внести несколько изменений в код нашей страницы.

Кто что делает?


<html>  -- сообщает браузеру о начале html страницы.
<head>  -- начинается голова веб страницы, место подключение стилей и другой информации
<title>Моя первая страница</title>  -- Заголовок веб страницы, отображается на вкладке браузера.
</head> -- конец головы веб страницы
<body>  -- начало основной части страницы
<h1>Привет мир!</h1> -- заголовок первого уровня
<img src=”logo.png”>  -- на страницу подключается изображение logo.png
<p> -- начало абзаца
Меня зовут Маркус, и это моя <strong>первая</strong> html страничка.
</p>  -- конец абзаца
<!--А меня видно не будет -->  -- комментарий, не отображается браузером, но содержится в коде страницы.
</body>  -- закрывается основная часть страницы
</html> -- закрывается html документ.

Мы кое о чем не рассказали. Подумайте, что делает тег strong и в качестве упражнения попробуйте добавить на страницу еще несколько абзацев и заголовков. И да, не забудьте поместить в папку с вашей страничкой картинку с расширением png. Переименуйте ее в logo и обновите вашу страницу.

Урок 2. Размечаем текст

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх