Создание сайта в html.

Создание сайта на Html. Для начинающих.

Автор Андерсон Л.М.

Начнем с самого начала.

Несмотря на то, что существует множество специальных приложений для создания сайта, учащимся школьникам предлагается создавать сайт в простейшем «Блокноте», путём набора текста на html. Нужно создать в Блокноте текстовый файл с расширением html, и будет создан файл веб-страницы.

HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов.

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

При создании сайта, все файлы должны быть структурированы по папкам. Обычно это папки IMG, CSS, папка, содержащая страницы сайта, и файл главной страницы HTML.

IMG – папка, содержащая графические файлы.

CSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний.

Папка HTML содержит страницы сайта.

Файл .html , в данном примере Lesson.html, индексная страница сайта, или главная, находится в корневом каталоге сайта.

Основные моменты.

• - Такая запись подразумевает, что в директории где расположен наш html документ есть папка JPG, в которой расположен файл foto.jpg

Главное, на что следует обратить внимание, « путь к файлу».

При написании кода страницы,

Необходимо правильно прописывать путь ко всем, используемым файлам. Путь прописывается из корневого каталога, в котором находится файл главной страницы.

При обращении к файлу, необходимо прописывать путь к нему, корневым считая тот каталог, в котором находится индексный файл.

Основная проблема у учащихся в том, что неправильно прописан путь и сайт не получается.

CSS в отдельном внешнем файле.

Оптимальный вариант, вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей. Иными словами, Тип, размер, стиль шрифтов, форматирование текста, дизайн страницы описывается, как бы в отдельной процедуре, которая затем вызывается в тексте кода html. Это есть использованием таблицы каскадных стилей. Такие CSS файлы собраны в одну папку.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css ).

Чтобы подключить в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

Запомним основные вещи.

Все документы должны иметь вот такой шаблон кода:

- начало документа - начало головы - закрытие головы - начало тела - закрытие тела - конец документа

Если есть открывающий тег то обязательно должен быть и закрывающий .

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

Правильно писать теги "лесенкой" по мере вложенности одного тега в другой.

С помощью параграфа можно расположить наш текст по центру:

Привет мир!!!

По левому краю:

Привет мир!!!

По правому краю:

Привет мир!!!

Или же обоим краям документа:

Привет мир!!! - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа

Так что же мы написали? и как это читает браузер?

Мысли браузера:

- начало документа.. опять работы привалило.. - смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят? - "название" значит.. это в шапке окна нужно написать его название: Моя первая страничка - опять чайник тренируется.. - все название закончилось.. можно идти дальше.. - ага и в голове кроме названия больше никаких вздорных мыслей не держим.. - "тело" документа все, что написано ниже выставляем на всеобщее обозрение Привет мир!!! - как мило! Достали уже!!! - переносим текст на следующую строчку.. я даже догадываюсь, что в ней будет... Меня зовут (здесь Ваше имя), это моя первая страничка! - ну да так и есть.. ничего пооригинальнее придумать не могут.. - что всё что ли? Больше ничего не отображать? - ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!

Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи:

Публикация сайта.

Как выложить сайт в Интернет? Для того что бы Ваш сайт стал доступен много миллионной публике сети Интернет Вам необходимо сделать две вещи:

Присвоить ему индивидуальное имя - домен.

Разместить сайт на каком либо сервере - (воспользоваться услугой хостинга).

Для того чтобы не было проблем , запомните следующее:

Все названия файлов писать с маленькой буквы и на английском языке.

И верно прописывайте все пути к файлам, тот каталог, в котором находится индексный файл, считайте корневым.