Штирлиц — Сеть печатных салонов в Перми

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

Файл index html: Урок 1. Как создать простую страницу на html?

Содержание

Файловая структура сайта и структура HTML

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

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

Создайте на компьютере (только не на рабочем столе) папку, назовите ее store (переводится «магазин»). В ней создайте файл index.html — для этого создайте текстовый документ и просто полностью переименуйте его в index.html. Теперь в папке store создайте папку css, а в ней создайте файл style.css.

Сразу скажу, что файл index.html здесь главный. Именно его нужно будет потом открыть в браузере. В файле style.css будут находиться CSS-стили, с помощью которых будут заданы цвет для шрифта, размер шрифта, цвет фона, размеры картинок и другие параметры для внешнего оформления сайта. Для того, чтобы эти стили сработали для данного сайта, в index.html будет ссылка на style.css. Таким образом, когда вы откроете index.html в браузере, когда браузер «встретит» ссылку на style.css, он «возьмет» из style.css все стили и применит их к данному сайту. Надеюсь, что здесь всё понятно.

На данный момент можно сказать, что в index.html находится содержимое: текст, картинки. А в style.css находится всё внешнее оформление: в какой цвет покрасить, какой размер задать и т.д.

Для разработки вам необходим редактор SublimeText. Скачайте его за считанные секунды на официальном сайте sublimetext.com и установите. Это займет меньше 1 минуты.

Откройте ваш index.html в редакторе SublimeText и вставьте следующий код:

<!DOCTYPE html>
<html lang="en">
   <head>
	<meta charset="utf-8">
	<title>Store</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body>		
   </body>
</html>

Посмотрите на этот код. В строке <link rel=»stylesheet» type=»text/css» href=»css/style.css»> как раз указывается ссылка на style.css (link переводится как «ссылка»). Путь до файла стилей указывается в атрибуте href. В данном случае это относительный путь, то есть путь относительно главного файла index.html (браузер сперва перейдет в папку css, а потом через слеш перейдет в сам файл style.css). В этом уроке style.css разбираться не будет, я разберу только index.html.

Сразу разберем весь HTML-код. Данный код — это основа основ HTML. То есть все эти теги в обязательном порядке должен содержать любой HTML-файл. Итак, что здесь есть. 

Первая строка <!DOCTYPE html> просто сообщает браузеру, что это HTML-код.

Во второй строке открывается тег <html>. Обратите внимание, что закрывается он в самой последней строке кода — </html>. Именно между тегом <html> и </html> находится

ВЕСЬ HTML-код. У тега <html> указан атрибут lang, он равен en. Это сделано для того, чтобы браузер сразу понял, что данная страница сайта на английском языке. Когда вы будете делать русскоязычные сайты, то нужно будет указывать lang=»ru».

Что такое тег в HTML

Название тега — это только первое слово после открывающей скобки <. То есть в случае с <html lang=»en»> тег называется html, а lang — это атрибут тега, en — это значение данного атрибута. Посмотрите внимательно на картинку:

Теги html, head и body

Внутри <html></html> могут быть только 2 тега — это head и body. Все остальные теги должны находится уже либо в head, либо в body.

В head находится только служебная информация, которая никак не отобразится на самом сайте. Есть только 2 элемента, которые отобразятся в браузере, но не на самом сайте, а на вкладке: 

Эти 2 элемента — это картинка, которая называется favicon (фавикон), и заголовок страницы. Про фавикон я расскажу позже. А заголовок в нашем коде указан в теге title. В нашем случае этот заголовок — Store.

Еще в <head></head> есть тег <meta charset=»utf-8″>. Он указывает, что кодировка сайта — utf-8. Об этом можете не задумываться, а просто указывать именно эту кодировку в каждой новой верстке. Раньше были различные кодировки, теперь всегда нужно указывать utf-8.

Также, в head есть тег link со ссылкой на style.css, про который вы уже знаете.

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

Теперь, находясь в Sublime Text, нажмите на клавиатуре Ctrl+S, чтобы сохранить изменения в index.html.

В данном уроке вы узнали

.html — расширение, по которому браузер «понимает», что в файле находится HTML-код.

head — тег для служебной информации сайта.

body — тег для всего содержимого сайта.

title — тег для заголовка страницы сайта.

href — это атрибут, в котором указывается ссылка на файл или другой сайт. Расшифровывается как hyper-reference, что с английского переводится ка «гипер-ссылка». Атрибут href может быть не только у тега link.

Что такое файл index.php? | Уроки PHP/MySQL программирования на сайте FructCode