Рейтинг: 4.8/5.0 (1863 проголосовавших)Категория: Бланки/Образцы
Если вы – начинающий веб программист и дизайнер, то создание сайта в блокноте html – это именно то, с чего стоит начинать. В блокноте можно создать самый простой сайтик с нуля, чтобы понять основную концепцию сайтостроения.
Конечно, сегодня уже достаточно движков, программ, шаблонов, которые облегчат вам жизнь в программировании веб страниц. но знание основ позволит вам лучше во всем разбираться, а это дорогого стоит.
Итак, приступим к созданию нашего первого сайта на html в блокноте.
1. Откройте блокнот на своем компьютере (Программы – Стандартные – Блокнот).
2. В самом файле напишите что-то вроде «Это мой первый сайт».
3. Теперь сохраните файл. Для этого можно создать новую папку, назвав ее, к примеру, «Мой первый сайт». Обязательно при сохранении в строке «Тип файлов» должно быть указано «Все файлы». Название файла можно придумать любое, например, index.html.
4. Зайдите в папку, кникните по созданному сайту и вы сможете увидеть свой первый сайт в браузере. ??
Пример самого простого html сайтаДо этого мы создали всего лишь файл с расширением html, теперь давайте построим первую интернет-страничку.
Удалите фразу «Это мой первый сайт». Впишите в свой index.html следующий код:
<title>Главная страница моего первого сайта</title>
<p>Html определяет границы документа. Если < > открывает границы, то «/» (слеш) в том теге закрывает границы. Кстати, все, что заключено в такие скобки < > в html-документе называется тегом.</p>
<p>Тег «title» позволит написать заголовок страницы.</p>
<p>А тег «head» откроет так называемое тело документа. Именно здесь мы будем писать все то, что хотим отобразить в нашем файле.</p>
<p>Внутри тела нашего документа мы пока выучим один тег — «p». Он заключает в себя отдельные «куски» материала. В нашем случае он обозначает абзацы.</p>
Не забывайте сохраняться после каждого изменения в файле. Обновитесь и посмотрите, что получилось.
Пока мы видим свой документ с локального компьютера, но если вы планируете показать его всему интернету, нужно, чтобы он правильно отображался. Именно в связи с этим нам нужно прописать специальные атрибуты в файле. Они не будут видны в самой странице, но в коде они должны быть.
Перед тегом «html» поставьте:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
А после «head» поставьте:
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
Теперь у нас все будет отображаться правильно.
Итак, первичное создание сайта в блокноте html закончено. Конечно, это всего лишь голый текст и впереди еще много работы, но именно с этого и начинается изучение html.
Иконки для киносайта
Иконки социальных сетей для сайта
Web дизайн: уроки для начинающих
Пример создания сайта в блокноте
Очень часто школьникам и студентам дают задание на создание сайта в блокноте, многим из них эта тема не интересна и в дальнейшем не пригодится.
Данная статья как раз ориентирована на такого рода людей, которым нужно быстро сделать то, что от них хотят с учетом того, что никаких начальных знаний нет.
В примере будет использоваться html код с использованием css, дабы не усложнять жизнь. 
Сайт, который мы создадим
Начнем с того, что создадим папку под сайт (называйте ее на свое усмотрение), а в папке создадим файл index.html, создать его просто, создайте текстовый файл и переименуйте вместо с расширением, а так же папку images, в которой мы будем хранить все изображения. 
Содержимое папки с сайтом
Начинаем работать с index.html, откроем файл в текстовом редакторе (блокноте), я буду использовать бесплатную программу Nodepad++.
Базовая структура файла должна быть следующая. (Весь код будет представлен в виде изображений, в конце статьи будет ссылка на исходники). 
Построчно разберем, что и зачем здесь написано, вы должны четко понимать, зачем вы пишите каждую строку своего кода.
<!DOCTYPE html> - обозначает интерпритатору, что это html документ написаный с применением технологий html5, можно опустить, работать будет, советую писать.
<html lang="ru"> - начало html документа, lang="ru" - язык документа русский.
<head> - начало блока служебной части кода, грубо говоря, здесь мы устанавливаем все настройки страницы, заголовок, кодировку, подключаем файлы и т.д.
<title>Заголовок страницы</title> - заголовок страницы, то что написано на вкладке в браузере.
<meta charset="windows-1251"> - кодировка страницы, обратите внимание, что кодировку можно устанавливать несколькими способами, этот способ не самый приоритетный.
</head> - закрытие служебной части кода.
<body> - тело документа, рабочая часть кода, все что мы напишем после этого тэга до его закрывающего брата, будет отображаться на странице браузера.
</body> - закрывающий тэг тела страницы.
</html> - окончание html документа, если вы что-то напишите после него, то оно так же отобразится на странице, делать этого я не рекомендую, т.к. вы нарушите структуру DOM'a.
Начнем создавать наш сайт, установим фоновое изображение с помощью css.
Между тэгами <style></style> можно писать любой css код, в css мы углубляться не будем, сделаем по максимуму без его использования.
Тэгу <body> мы установили фоновое изображение указав путь до изображения, указали, что изображение не должно копироваться если оно меньше разрешения экрана, смещение по горизонтали 50%, по вертикали 10%.
Далее нам нужно установить логотип и меню на страницу, для этого воспользуемся приемом блочной верстки.
Создаем единый блок с идентификатором "wrapper", в котором создаем два блока, для логотипа и меню. В блоке для логотипа подключаем изображение с помощью конструкции <img src="" />, если изображение не загрузится по каким то причинам, например у пользователя отключен показ, то будет отображен альтернативный текст помещенный в атрибут alt="".
Для создания меню используется список, существует несколько видов списков.
Для того, чтобы обратится к идентификатору через css, необходимо перед названием поставить знак #, для того, чтобы обратиться к классу - ".". Можно использовать идентификатор и класс с одинаковыми именами, но не советую этого делать т.к. велика вероятность запутаться.
Идентификатору #wrapper мы указываем, сделать отступ сверху 100 пикселей и слева 90.
Далее опускаем меню на 100 пикселей от логотипа вниз, за это отвечает класс .menu.
Оформляем наши пункты меню в .sf-menu li a, построчно разберем что там написано:
display: block; - отображение как блочного элемента, нужно для того, чтобы был кликабелен весь блок, а не только слово, попробуйте без этого свойства и вы поймете о чем я.
color: #fff; - цвет текста белый.
font-size: 24px; - размер текста 24 пикселя.
font-weight: bold; - жирный шрифт, это свойство отвечает за вес шрифта, измеряется от 100 до 600, с шагом в 100.
text-decoration: none; - убираем подчеркивание ссылок.
list-style: none; - слева от пунктов списка по умолчанию стоят точки, это свойство убирает их.
background: #000; - черный фон.
padding: 12px; - внутренние отступы со всех сторон по 12 пикселей.
width: 250px; - ширина 250 пикселей.
margin-top: 5px; - отступ сверху 5 пикселей, делаем отступы между пунтами меню.
Конструкция .sf-menu li a:hover отвечает за действие при наведении на элемент списка, в нашем случае мы делаем цвет текста черный, а фон белый.
Таким образом мы создали простую и в тоже время сложную на первый взгляд страницу в блокноте с использованием css.
Код css можно было (и желательно) вынести в отдельный css файл, но в рамках данного урока этого будет достаточно, понятно что я не сумею уложить все знания по html и css в одну статью, поэтому если появятся вопросы - пишите в комментарии, на все вопросы ответим.
P.S. Убедительная просьба, кликните "рассказать друзьям" - это проще чем написать сайт ;-) Спасибо!
14 апреля 2014 в 14:54 – 159 просмотров
Я вас всех радостно приветствую, мои дорогие друзья. Сегодня с вами как всегда Дмитрий Костин, и у меня для вас небольшой сюрприз, а именно экзамен! Хотя ладно, насчет экзамена я пошутил. Просто я решил закончить уроки по основам html и в этой статье применить знания, полученные на предыдущих уроках на практике.
Я хочу вам показать простой пример создания сайта html в блокноте Notepad++ за считанные минуты. Конечно сайтик мы создадим простой, не замороченный, быстрый, и я бы даже сказал лоховской (простите за мой французский))). Но все же, благодаря этому вы сможете закрепить полученные знания. Это действительно важно в этом деле.
Только не забудьте при создании нового документа в Notepad++ перекодировать его в UTF-8.
Вы спросите: «А почему так мало уроков? В html гораздо больше тегов и атрибутов». Да-да, вы действительно правы, но время идет и многие теги уже не работают в последних версиях html, либо же просто считаются ненужными и ими никто не пользуется.
Вот например есть тег <font>, который отвечает за шрифт. Благодаря ему и атрибутам, можно изменять внутренний контент, например размер шрифта, цвет, сам шрифт. Но сегодня, как я уже и сказал, <font> не принято использовать. Такой код уже не будет являться валидным. Вместо этого мы используем CSS. Это намного удобнее и практичнее. Ну да ладно. Давайте лучше приступим созданию сайта.
Скачайте отсюда необходимые файлы для работы. Внутри вас:
Конечно в данной статье я помогу вам справиться с этим заданием, но я всё же надеюсь, что вы попытаетесь все сделать сами, так сказать ручками, чтобы набить их.
СтруктураСамым первым заданием вы должны сделать стандартную структуру html-документа. Помните, как ее делать? Это я рассказывал еще тогда, когда мы создавали наш первый сайт html в блокноте. Да-да. Вы правильно поняли. Вам всего лишь нужно поставить главные теги.
Если у вас возникли проблемы, то конечно можете посмотреть на картинке, но в виде текста я это выкладывать не буду, чтобы вы могли всё делать руками, а не тупо копировать и вставлять.
И кстати, сделайте три разные копии со структурой и обзовите их как-нибудь index.html, table.html, obo-mne.html.
ЗаголовкиВ документах я пометил те предложения, которые должны быть заголовками, так что ваша задача будет состоять в том, чтобы эти заголовочки разных уровней в нужных местах проставить и отцентрировать их. Я думаю, что вопросов с этим ни у кого не должно возникнуть, так как не так давно мы проходили заголовки в html. Вставьте заголовки из документа index.docx в index.html, ну и конечно же из других документов ворд вставьте всё в одноименные html-файлы.
Если проблемы все таки возникают, то смотрите на скриншот ниже, как это всё должно выглядеть. Но только смотрите, если у вас что-то не получается.
Итак, всё сделали? На всех страницах? Молодцы! Так держать. Теперь переходим к следующему заданию.
АбзацыВ этом задании вам нужно правильно разделить текст на абзацы. А как это сделать? Это мы проходили в данной статье. так что если вы не помните, то обязательно повторите. Но на самом деле это легче легкого. Просто заключаем нужные абзацики в парные теги <p></p> .
Давайте теперь на каждой странице нашего сайта сделаем небольшое меню. Вообще, если честно, то таким образом меню уже мало кто делает. Сейчас рулить css. Я уже упоминал в статье про маркированный список, что с помощью этого самого списка обычно и делают пункты меню, но только с применением CSS. И вы не волнуйтесь. Я обязательно позже расскажу и про CSS и как с ним работать. Всё будет.
Но сегодня мы делаем таким топорным методом чисто для примера, не более того. Так что зайдите в папку img. Там вы увидите 3 файла в формате png. Их-то нам и нужно будет вставить на каждую страницу нашего html сайта. Для этого вам надо открыть страницу index.html в блокноте (Notepad++) и прямо после открывающего тега <body> поставить три строчки:
Когда вы сохраните всё это дело, то у вас в верху страницы должны появиться три надписи: Главная, Таблица, Обо мне. Пока это просто ничего незначащие картинки, которые нам надо будет превратить в ссылки.
Мы уже проходили как делать гиперссылку в html. но еще пока не делали ее в качестве картинки. Вот давайте и на практике потренируемся. Всё, что нам понадобиться это заключить тег <img> в знакомый нам тег <a> с атрибутом href. Ссылки мы будем вставлять на соответствующие страницы. Смотрите как я сделал это у себя. Я думаю, что вам должно быть всё понятно.
Теперь сохраните документ, войдите на главную страницу index.html и попробуйте поклацать по менюшке. Всё круто, всё работает.
Ну на самом деле любой сайт будет смотреться некрасиво, не будь у него какой-нибудь даже минималистической шапки. Поэтому нам нужно будет ее вставить. В папке img я подготовил и картинку для шапки, которая называется header.jpg .
Вот эту вот шапочку нам нужно вставить на все страницы нашего сайта, так же как и в случае с менюшками. Только header.jpg нужно будет поставить после открывающего тега <body> и обязательно перед нашими картинками с меню. Также после вставки шапки не забудьте поставить тег <br> для переноса строки.
Кстати советую вам подогнать размер под другое разрешение, потому что я выложил картинку довольно большую. Для этого вам достаточно поставить атрибут width="900". Ну это я поставил для примера. Вы можете использовать свои параметры.
После этого по традиции смотрим, что у нас получилось.
Без этого чуда мы с вами сегодня тоже не обойдемся. Всё помнят, как ставить маркированный или нумерованный список? Если нет, то можете освежить свои знания здесь и здесь .
Я в документе отметил те места, где вы должны будете эти списочки делать, но конечно же на всякий случай я покажу как это должно выглядеть.
Сохраняем и смотрим, что у нас получилось. Вроде все как надо. Отлично. Уже продвинулись далеко вперед.
Вставка таблицыОткройте в блокноте страницу table.html. перетащите из одноименного вордовского документа все заголовки и текст, после чего расставьте все теги и атрибуты как надо.
Вот теперь переходим к тому, что нам нужно. Создаем таблицу в 5 строк и 5 столбцов, после чего вставляем в них соответствующие значения. Не забываем ставить нужные атрибуты, а именно border="2", cellpadding и cellspacing по 5. В коде это должно выглядеть примерно так:
Сохраняем и смотрим, что у нас получилось. Всё отлично!
Мы уже почти всё сделали. Нам только осталось закончить страницу об авторе. Зайдите в страницу obo-mne.html и вставьте из одноименного вордовского документа весь текст со всеми заголовками и расставьте теги.
Теперь нам нужно вставить фотографию автора. В папке img я для вас припас одну такую. Она носит название autor.jpg. Запомните это.
Короче, теперь после тегов шапки сайта и менюшек вам нужно будет прописать адрес этой картинки и поставить атрибут align="left". что текст оплетал фотографию. Если выглядит некрасиво, то можно поиграться с отступами на несколько пикселей. Примерно это должно выглядеть так.
Все сделали? Всё получилось? Я надеюсь, что да. Но теперь нам нужно вставить видео из ютуба в html-документ. В документе ссылка есть. Всё, что вам нужно — это просто вставить ее после основного текста. Если вдруг видео налезает на фотографию автора, то просто после текста сделайте парочку отступов с помощью <br> .
Ну вот вроде бы и всё. По заданию всё выполнено и теперь у вас есть такой простенький html сайт, сделанный в блокноте Notepad++ буквально за 10-15 минут. Несмотря на то, что это наипростейший html каркас без CSS свойств и других приблуд, оказывается до сих пор существуют люди, которые продают курсы аля «Как создать сайт» с информацией, подобной этой. Причем берут за это деньги — и 500 рублей, и даже 2000. Я просто в шоке!)
Уж если и брать какие-то курсы, то лучше у профессионалов, которые собаку на этом съели. Лично я рекомендую вам посмотреть курс Андрея Бернадского " HTML5 и CSS3 с нуля до гуру ". Курс просто потрясающий, несложный в освоении и рассчитанный на любой уровень пользователя. Благодаря ему вы реально научитесь верстать довольно неплохие сайты.
Кстати как ваши ручки? Надеюсь, что вы не филонили и всё прописывали своими чудесными ручками. Я надеюсь, что каши в голове у вас нет и я все нормально объяснил. Ну а если у вас что-то не получилось, то в папке лежит готовая версия нашего сайта со всеми комментариями, чтобы вы смогли разобраться.
Фух. В общем на сегодня я всё. Воды сегодня выпил литра 4 наверное из-за жары. Так что надеюсь, что вам моя статья понравилась и была полезной в плане изучения. Не забывайте подписываться на новые статьи моего блога. Я вам расскажу еще много всего интересного. А вам я желаю удачи и спокойно перетерпеть жару. Ну а я пошел охлаждаться. Увидимся. Пока-пока!
С уважением, Дмитрий Костин.
Понравилась статья? Поделись с друзьями в соцсетях:
Так и атрибуты тегов тоже лучше в контенте не прописывать. А то потом захочется заголовки от центра к левому краю перенести, а у них. намертво align='center' (конечно, можно попробовать перебить такое позиционирование через css при помощи !important. Но все равно, код уже не так красиво смотрится со всеми этими атрибутами =)
И кстати, есть же относительно новые теги: header, aside и так далее, весьма удобно и их использовать) Чтобы хотя бы дивы разбавить))
20 августа 2016 в 12:38
Блог Дмитрия Костина
© 2015-2016 Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером, даже если вы впервые слышите это слово
Верстка это процесс создания WEB-страниц. Создавать страницы Вы будете самостоятельно, т.к. то, что сделано собственными руками, лучше чем купленное или ворованное. Не зря же говорят - "Нет подарков лучше, чем подарки, сделанные своими руками".
Для создания страниц могут использоваться редакторы двух типов: WYSIWYG и текстовые .
Если Вы еще совсем не дружите с HTML, то использовать текстовый редактор рано. Можно создавать страницы редакторами WYSIWYG. в которых пользователю необходимо только разместить, желаемым образом, объекты на странице. В качестве такого редактора можно использовать Microsoft Word. входящий в состав пакет Microsoft Office.
Рассматривать верстку страницы WYSIWYG-редакторами я не буду, т.к. всю работу выполняет сам редактор, он автоматически генерирует код веб-страницы. Нам же, необходимо знать весь процесс создания страниц сайта, поэтому в качестве программы для создания WEB-страниц будем пользоваться текстовыми редакторами.
Текстовым редактором может быть стандартный Блокнот. но я предпочитаю другую программу, полностью заменяюшую блокнот - Notepad++ .
Теги это элементы разметки веб-страницы, о которых Вы должны были узнать из первой статьи .
- определяет начало и конец страницы, обязателен. Между ними содержится весь код страницы. - отвечает за информативную сторону страницы. - заголовок, который отображается в верху окна. - между этими тегами содержится весь видимый контент страницы.
- логический блок, используется при блочной верстке. - вставляет изображение. ссылка - добавляет ссылку на страницу, вместо решетки указывается ссылка.
Любая страница имеет расширение html. Поэтому мы должны видеть какое расширение имеет тот или иной файл, для этого откройте "Мой компьютер" выберите в меню "Сервис" - "Свойства папки", в открывшемся окне перейти во вкладку "Вид" и снять галочку напротив "Скрывать расширения для зарегистрированных типов файлов".
Теперь все приготовления окончены и можно создавать веб-страницу.
Для начала нужно создать файл с расширением html, для этого, на пустом месте рабочего стола или папки, щелкните правой кнопкой мыши, выбираете меню "Создать" - "Текстовый документ", дальше меняете название файла на имя.html, имя может быть любым.
- обязательная часть, можно не менять - начало страницы, написанной на языке html - начало информационной части описания Название страницы - конец тега head
Здесь должен быть расположен основной код страницы. - окончание страницы.
Только что Вы увидели пример простой страницы. Нужно отметить, что в блоке head, кроме заголовка, может находиться и другая информация, например ключевые слова, описание страницы, авторство, кодировка, ссылки на подключаемые файлы или описание используемых стилей.
В теге body располагается код страницы отвечающий исключительно за видимый контент. Для примера можете скопировать нижеуказанный код и открыть получившийся файл в браузере.
Пример простой страницы
Привет мне! Это моя страница, которую я сделал выполняя все инструкции сайтаЯ умею выравнивать абзац влево,
и по правому краю.
Если у Вас получилось, то пробуйте экспериментировать, добавлять новые элементы на страницу, менять атрибуты уже существующих.
Вобщем если у Вас есть желание научиться делать грамотно и самостоятельно WEB-страницы, то продолжайте изучать HTML, например здесь.
Вы знаете, что любой сайт состоит из шапки. основной части и подвала. Это значит, что каждая страница сайта, состоит из одних и тех же частей, т.е. одинакового кода, а меняется лишь основная часть, содержащая контент.
Такие повторения доставляют неудобство, т.к. приходится писать или копировать повторяющиеся участки, страницы потребляют лишнее дисковое пространство, если Вам понадобится что-либо поменять, то менять придется в каждом файле. Недостатков масса.
Для решения первого недостатка достаточно сделать html-файл, который будет содержать основную структуру документа без основной части. Для примера можно воспользоваться вот таким шаблоном.
Пример страницы с таблицей №1.
Такой выход неплох, но если Вы захотите, например убрать левую часть сайта, то придется исправлять каждую страницу, а это неудобно и отнимет много времени. Хотя если сайт будет состоять из десяти страниц, то вполне подойдет.
Если страниц будет больше сотни, то такой шаблон уже не годится. Здесь можно применить другой подход. Например сделать файлы, которые будут содержать каждую повторяющуюся часть сайта, и на каждой странице подключать эти файлы в нужном месте.
Для реализации такого шаблона необходимо знание языка PHP. ознакомиться с которым можно тут или тут. Следует учесть, что это серверный язык, поэтому использование шаблонов такого типа будет возможно только на хостинге с поддержкой PHP. Большинство бесплатных хостингов такой функции не предоставляют и придется ограничиваться только первым шаблоном или искать другие решения.
Пример шаблона сайта на php.
Пример страницы с таблицей №1. Здесь будет основной код страницы
Как видим, есть четыре файла, которые хранятся в папке "shablon" и отвечают за разные части страницы. Записав в каждый файл код, отвечающий за отображение определенной части страницы, данный шаблон подключает к текущей странице блоки, отображаемые на всех страницах сайта.
Такой подход гораздо удобнее, т.к. при необходимости поменять какую-либо часть сайта, Вам придется поменять ее только в одном файле.
Как вы поняли, данный процесс достаточно сложный и если речь идет о создании серьезного коммерческого проекта, то нужна целая команда специалистов. Но ведь Вы будете создавать пока-что любительский сайт и с ним вы вполне сможете справиться своими силами.
Пусть Вас не пугают сложности, ведь это все делается только для Вас, именно Ваш сайт будет приносить Вам прибыль в будущем.
6. Текстовые ссылки
7. Графические ссылки
8. Простая таблица
9. Мета теги для сайта
10. Маленькие хитрости
11. Правила дизайна
Теги для создания сайта, html страницы, код ссылки, примеры. Написание страниц для Интернета, это своего рода написание программы, исполняемой WEB браузером, и определяемое программными меткам, так называемыми тегами. Дизайн страницы, в свою очередь, это её эстетические свойства, а так же удобство восприятия текстовой и графической информации.
НЕОБХОДИМОСТЬ ИЗУЧЕНИЯ HTML КОДА И ТЕГОВ ДЛЯ СОЗДАНИЯ САЙТА
Существует достаточно много разнообразных программ при помощи которых можно сделать WEB страницы, не задумываясь над технической стороной вопроса. Но когда возникает необходимость ввести в код страницы не стандартные или сторонние программы, вот тут и начинаются трудности. Минимальные знания, по написанию страниц, только при помощи блокнота, дадут необходимые навыки для понимания общей структуры страницы и тегов для создания сайта, возможности исправлять ошибки, и дополнять страницу текстом, не прибегая к выше означенным программам, а также понимать исходный код страницы и вносить собственные изменения и дополнения.
ТЕГИ ДЛЯ САЙТА
Теги - это программные метки, используемые браузером для интерпретации и представления HTML страниц в определённом графическом виде. Именно графическом виде, потому, как посредством браузера, без дополнительных программ, невозможно изменять текст и дизайн страницы непосредственно на самой странице.
Теги, это программные метки, с которыми работает браузер, и которые указываю ему, что и, как показывать в окне просмотра документа.
Теги бывают двух видов - парные и одиночные. Все теги заключаются в скобки <тег>. Если таких скобок нет или одна из скобок отсутствует, то браузер интерпретирует такой текст, как обычный текст, а не как команду.
Парные теги состоят из открывающего тега <html> и закрывающего тега </html>, как видите они абсолютно идентичны, и отличаются только вертикальной косой чертой у закрывающего тега, который обозначает конец интерпретации, управляющего кода, браузером.
Не парные теги, например <br>, это в основном теги, обозначающие перевод каретки, пробел, особый элемент текста. Чаще всего они относятся к простому тексту, и используются для его форматирования.
Вся информация, тексты, графика и рисунки, помещаются между парными тегами и интерпретируются браузером как таковые, но с определёнными атрибутами для отображения на странице.
Например, можно поместить на страницу фотографию размером 300х200, а браузеру, при помощи тегов определяющих высоту и ширину, указать отображать на странице изображение размером 150х100, то есть в два раза меньше истинного.
При помощи тегов задается цвет текста и его вид, создаются ссылки на другие документы и на другие сайты. Размечаются таблицы, определяется толщина и положение линий. Задаётся цвет самой страницы, и цвет ссылок.
СОЗДАЁМ ПРОСТУЮ HTML СТРАНИЦУ
Чтобы создать простую HTML страницу, без специальных программ, создайте документ txt, при помощи блокнота или WordPad, в котором напишите:
<html> <head> <title> Документ </title> </head> <body> Текст </body> </html>
Закройте документ и измените окончание файла txt на htm или html, согласитесь с вопросом об изменении расширения файла. Иконка файла «блокнот» должна измениться на иконку файла «Интернет». Теперь откройте полученный документ, обычным двойным кликом, вместо тегов вы увидите надпись «Текст».
Это необходимый и минимальный набор тегов для создания HTML файла. Теперь можно, открыв этот файл, при помощи блокнота, напечатать туда нужный текст или скопировать текст из другого документа.
Рассмотрим используемые здесь теги.
<html> </html> - открывающий и закрывающий теги. которые определяют, что всё, что находится между ними это HTML документ. Всё, что находится за пределами этих тегов, должно игнорироваться браузером. Но это не всегда так, браузеры научились отображать даже ту информацию, которая находится за пределами тела документа, интерпретируя это просто как ошибку при написании кода и автоматически исправляя её. Будьте внимательны.
<title>Документ</title> - служебные теги и название документа, которое отображается при его открытии.
<head></head> - служебные теги, предназначенные для размещения между ними информационных тегов и тегов для поисковых роботов.
<body></body> - тело документа, между этими тегами размещается весь основной текст, графика и анимация.
<html> <head> <title> Документ </title> </head> <body> Текст </body> </html>
Как видно из этой строки между парными тегами могут находиться и другие парные теги. Рассмотрим эту же строку в несколько ином виде, который общепринят для написания HTML файлов.
<title> Документ </title>
Текст, картинки, ссылки, анимация.
Между тегами <body> </body> могут находиться также и другие вложенные, парные и не парные теги, отвечающие за форматирование текста и картинок или отображающие ссылки.
В завершение этого раздела необходимо сказать, что если вы создаете первую или единственную страницу своего сайта, так называемый сайт визитку, то чтобы этот файл открывался автоматически и по умолчанию, ему необходимо присвоить имя index.html.
Это имя интерпретируется браузером всегда, как первая и главная страница сайта. Остальные страницы сайта должны иметь названия на латинице или быть пронумерованы, например sait.html, ait01.html, 002.html.
Ниже и далее перечислены теги, используемые в HTML документах, без приведения конкретных примеров.
ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА
При помощи тегов форматирования текста, можно также и изменять уже имеющийся текст. Текст можно сделать жирным, наклонным, продчеркнутым, изменять размер и ширину букв, изменять цвет всего предложения, слова и даже отдельной буквы. Текст который форматируется должен находиться между парными тегами. Необходимо соблюдать порядок вложенности парных тегов. Начните с простых конструкций.
Переход на следующую строку <br>
<p align="left">абзац выровнен по левому краю. </p>
<p align="right">абзац выровнен по правому краю. </p>
<p align="center">абзац выровнен по центру. </p>
<p align="justify">абзац выровнен по ширине. </p>
<p><font size="1">Шрифт 1</font></p> самый маленький
<p><font size="2"> Шрифт 2</font></p>
<p><font size="3"> Шрифт 3</font></p>
<p><font size="4"> Шрифт 4</font></p>
<p><font size="5"> Шрифт 5</font></p>
<p><font size="6"> Шрифт 6</font></p>
Дескрипторы или теги <META> - не обязательные дескрипторы html страницы. Они располагаются в теле <head>, после заголовка <title>Документ</title>. Эти дескрипторы содержат описание страницы, ключевые слова, информацию об авторе, команды для роботов и прочую служебную информацию.
Здесь мы рассмотрим наиболее важные и часто используемые мета тэги.
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">
Указание типа документа и его кодировки. Это наиболее важный тег, для правильного ображения страницы в разных браузерах.
<META NAME="Title" CONTENT=" Заголовок страницы ">
Указание заголовка страницы.
<META NAME="Description" CONTENT=" Описание вашей страницы .">
Это аннотация страницы. Если страница не содержит этого тэга, то поисковая система в качестве аннотации возьмет начальный фрагмент текста страницы, что зачастую нежелательно, т.к. в верхней части страницы может располагаться баннер.
<META NAME="Keywords" CONTENT=" Ключевые слова .">
Список ключевых слов страницы. Зачастую используется поисковыми машинами. Ключевые слова должны быть простыми и обязаны описывать суть страницы.
Если содержание Вашей страницы часто меняется, то вставьте следующие два тега:
<META NAME="Document-state" CONTENT="Dynamic">
Указывает, что страница динамичная, т.е. ее содержание периодически меняется.
<META NAME="Revizit-after" CONTENT="10 days">
Указывает роботу периодичность смены информации.
<META NAME="Document-state" CONTENT="Static">
Указывает, что страница статичная, т.е. ее содержание не меняется.
<META NAME="author" content=" Автор ">
Тег, в который вы можете вписать своё имя.
<META HTTP-EQUIV="Reply-to" content="mail@pochta.ru">
Тег для указания адреса электронной почты автора.
<META NAME="Copyright" content=" Авторские права ">
Описание авторских прав на документ.
Три бегущие строки
< marquee behavior =" scroll " direction =" left ">Бегущая строка 1</ marquee >
<marquee behavior="alternate" direction="right" loop="30" scrollamount="10"> Бегущая строка 2</marquee>
<marquee behavior="scroll" direction="left" scrolldelay="500" bgcolor="#00ff00"> Бегущая строка 3</marquee>
Вместо букв, строки. можно использовать и изображения.
НЕМНОГО О ПРАВИЛАХ ДИЗАЙНА.
Страница документа не должна быть по размеру более 70-100 килобайт, иначе она будет очень долго загружаться в браузер. Страница не должна быть более двух экранов, а лучше только один экран браузера, от этого зависит удобство просмотра документа. Используйте достаточное количество украшений, но не избыточное, иначе основная тема страницы утонет на их фоне. Используйте не более 2-3 цветов для оформления страницы, лучше, если это будут оттенки одного из основных цветов и один контрастирующий цвет, для текста и ссылок.
Напоследок, хочу вам пожелать успешного дальнейшего изучения WEB дизайна - программирования и тегов для создания свих сайтов. Теперь вы в принципе готовы начать работать с визуальными редакторами web страниц. Хороший редактор с отображением визуального и, или, программного вида страницы это Macromedia Dreamweaver 8.0 или выше. Достаточно простая навигация, возможность просмотра одним нажатием клавиши, возможность правки HTML кода, простая вставка изображений и т.д. и т.п.
От автора: все когда-то начинали изучение html с создания простейшего сайта в блокноте. Хотя эта программа совсем не подходит для разработки веб-сайтов, но создать в ней что-то примитивное все же можно.
Итак, как создать сайт в блокноте на html? Это является вполне выполнимой задачей. Конечно, намного удобнее и правильнее использовать для этого специальные программы, вроде Notepad++, но для первого раза можно обойтись и блокнотом. Я не буду вас отговаривать – хотите создать сайт в блокноте? Создавайте. Как? А вот об этом давайте поподробнее.
С чего нужно начинать для создания сайта html в блокнотеЛюбой сайт создается в первую очередь с помощью html-тегов. Это язык, который используют для разметки веб-страниц. Зачем он нужен? Он необходим браузерам, которые умеют читать и понимать его, формируя страницу в согласии с тем, какой код написан.
К примеру, захотите вы на вашей страничке вывести список. А как собственно сказать браузеру, что это должен быть именно список, а не обычный текст? В ворде, например, есть кнопки маркированного и нумерованного списков. В html специально для этого есть свои теги. Заключив нужный текст в эти теги, браузер уже понимает, что это список. Естественно, такая же логика и с размещением других элементов.
Для начала нам нужно создать в блокноте два файла. Один нужно назвать index.html, а второй – style.css. Заметьте. html и .css должны быть расширениями файла, а не его именем. То есть не style.css.txt, а именно style.css. Сами имена файлов могут быть и другими, просто я взял самые популярные.
Зачем эти самые файлы нужны? В html-файлы мы будем описывать структуру сайта, а в style.css – его внешний вид. Html и css – это языки, которые обязательно нужны для создания сайта. Как для человека иметь и правую руку, и левую. Скажет ли он, что ему хватит одной руки? Конечно, нет. Так же и с этими двумя языками, но которых стоит все сайтостроение.
Начинаем создавать сайтИтак, это уже небольшой код, который и создаст нашу первую веб-страничку. Как видите, он почти полностью состоит из тегов.
Рис. 1. Сравнение внешнего кода в блокноте и Notepad++. Как видите, левее все гораздо понятней и красочней.
Самые основные тегиНужно объяснить эти простые теги для создания сайта html в блокноте. Изучение html заключается в изучении тегов, с помощью которых строится сайт. Ну а пока я объясню, что означают уже написанные теги:
Первая строка просто указывает тип документа. Рекомендуется ее указывать, чтобы все правильно работало.
html — парный тег контейнер всей веб-страницы в целом. В нем будет содержимое всей страницы в целом. Как видите, он закрывается в самом конце.
head — тег, в котором размещается разная информация, которая не будет выведена на сайт, но имеет важное значение для его правильной работы. Например, здесь мы уже прописали кодировку и название страницы, которое выведется в верхней строке браузера.
meta — тег для мета-информации. Такой, как кодировка, метатеги и т.д. В данном случае мы задали кодировку utf-8.
title — название страницы.
link — с помощью этого тега к страничке можно подключить другие файлы. Так мы подключили таблицу стилей css. Сейчас не будем конкретно разбираться во всех его атрибутах. Скажу только, что href – это путь к файлу. Чтобы все работало index.html и style.css должны лежать в одной папке.
На этом наш тег head закрывается. Кстати, вы заметили, что тег meta мы не закрыли? Все потому, что в html есть как парные, так и одинарные теги. В парные можно записать какое-то содержимое, в отличие от одинарных.
Далее открывается тег body. Если вы хоть немного в ладах с английским, то понимаете, что это переводится как тело. То есть в body мы размещаем информацию, которая непосредственно будет выведена на экран – тело страницы. Напишем здесь стандартную фразу. Теперь самое время проверить нашу страничку. Откройте index.html в любом браузере. Если вы видите там пустой экран и фразу: “Привет, мир!”, значит, все получилось. Осталось только проверить подключение файла style.css.
Этот файл у нас все еще пустой. Скопируйте туда такой код:
Рис. 2. Это уже, по сути, веб-страничка, хоть и самая примитивная.
Сохраняйте и опять открывайте страницу в браузере. Если вы видите фразу на фоне красного цвета – все работает. Можно начинать работу над созданием своего сайта. В css мы указали команду сделать красный цвет фоном всей нашей страницы. Теперь понимаете для чего он нужен, этот css?
Вот так вот мы и будем создавать сайт: формировать элементы в html, потом оформлять их через css и в конце концов получим что-то, похожее на сайт.
Структура сайтаПока я предлагаю вам отвлечься от кода и немного подумать. Наверняка в сети вы бывали на сотнях сайтов. Хотя внешний вид у всех их разный, общая структура часто очень похожа. Есть так называемая шапка сайта, где размещается логотип, контактная информация и т.д.
Есть горизонтальное или вертикальное меню, в котором вынесены ссылки на самые главные страницы и разделы сайта. Также есть основная часть, где располагается контент и, возможно, еще одна боковая колонка. Обязательно присутствует низ страницы, где тоже что-то размещают.
Нам остается только разобраться, как с помощью html можно эти элементы явно задать, а потом прописать им какой-то внешний вид. Об этой, более подробной и практической части создания поговорим в следующей статье, потому что тема слишком велика, чтобы описать ее на одной странице.
Ну а вообще, разработке сайта в блокноте – не самый удобный способ, как я уже и говорил. В дальнейшем, если вы захотите серьезно заниматься сайтостроением, то вам в любом случае понадобится более серьезная программа вместе с уроками, которые позволят изучить нужные технологии. А в следующей статье мы продолжим создание сайта с помощью html в блокноте и сделаем нашу страничку более похожей на настоящий сайт.
Прямо сейчас научитесь верстать сайты с нуля.
