Для того, чтобы создать свой первый сайт, или простую HTML страничку, нужно освоить несколько обязательных пунктов, которые будут описаны в данной статье. А главное — нужно понимать, что сайт за пять минут не делается. Естественно, все видят много рекламных материалов, которые обещают чудесный веб-сайт своими руками за несколько мгновений, например скачай шаблон и загрузи на хостинг… Но все это не совсем правда. Можно со мной не согласиться, но я начинал с ноля и знаю о чем пишу. Для начала, как минимум нужно ознакомиться с языком HTML, без которого не возможно написать страницу и разобраться со , типа где колесо а где руль. Для примера, нужно перечитать все страницы данного сайта, чтобы создать приличный сайт и раскрутить … И когда появиться общее представление, тогда и двери начнут открываться. А начинать нужно — значит начнем создавать свою первую веб-страничку и удачи нам!

Основные HTML теги для написания сайта.

Для начала нужно ознакомиться с основными тегами, которые применяются при создании любого веб-сайта. Подробнее они описаны в разделе этого сайта и этих знаний будет вполне достаточно для начала, а ниже общий осмотр, тегов. Их нужно уметь видеть и понимать предназначение, тогда не будет проблем с изменениями и дополнениями на странице.

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

— это таблица, одна из самых важных конструкций при построении сайта. … — теги для написания заголовков, параграфов, списков для вставки текста на страницу. — блочный элемент, на котором можно построить весь сайт, изучить нужно обязательно. — так вставляется изображение. Страница 1 — так делается ссылка на страницу. Инструменты для верстки веб-сайта. Для верстки сайта нужен редактор, в котором можно его верстать. Лучше всего для этой цели подойдет програма Adobe_Dreamweaver_CS3_v9_RUS, , которую можно скачать в сети и установить на свой компьютер. С ее помощью открываются все файлы для редактирования. В дальнейшем, нужно будет установит на свой комп . Это прога, полный симулятор обычного сервера, в котором ведется создание, редактирование и просмотр сложных веб-проектов, написанных на языках PHP и с хранением информации в базах данных MSQL. Но к этому еще далеко и возможно многим не понадобиться. Естественно, нужно видеть страницу которую создаем. Для этого подойдет любой браузер. И если Вы уже читаете данную статью, значит Вы в сети и браузер на вашем компе уже установлен. А открыть файл для просмотра можно дважды кликнув по файлу страницы, или выбрать пункт меню — открыть с помощью , и выбрать свой браузер. А для того, чтобы страница была красивой, нужно . Но сначала нужно его отредактировать в каком то редакторе. Лучше всего это делать в проге — Adobe Photoshop , которую также нужно изучить. Из каких частей состоит страница сайта? Для начала создадим простую HTML страницу и назовем ее — index.html . Она будет главной и название должно быть только таким, все остальные страницы можно называть как угодно, но обязательно с расширением _ _.html и обычно создают папку для хранения изображений. Должно получиться вот так — Состоит страница минимум из трех частей: хедер (шапка сайта) — в котором находятся все кодировки, стили, название страницы, основные логотипы, ключевые слова. контент — здесь все наполнение, другими словами все что нужно показать в браузере, это тексты, изображения и т.д. футер (подвал) — здесь обычно счетчики, копирайты, возможно меню, реклама, или что то другое. обязательная часть обьявление языка написания страницы — кодировки сайта Здесь название страницы, отображаемое в верхнем левом углу браузера — здесь располагают ХЕДЕР и меню сайта ——— дальше контентная часть это уже веб-страница, которую можно сохранить в файл с названием — ya.html и посмотреть в браузере. — внизу обычно ФУТЕР — обьявление окончания данной страницы Стили в языке HTML при создании сайта. Возможно я повторюсь, но чтобы убедится что все работает и сделать это своими руками, сделайте следующее: На пустой странице щелкните правой кнопкой мышки, выбираете меню «Создать » — «Текстовый документ «, дальше меняете название файла на index.html , потом копируете код страницы с примера, открываете файл index.html с помощью блокнота, вставляете с буфера код, сохраняете, дальше открываете файл с помощью браузера Mozilla Firefox , и смотрите результат. А построение более сложного проекта, созданного без использования таблиц, можно изучить на следующей странице, где описано Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но используя полученные знания в предыдущих уроках. В этом уроке курса MM часть 1 мы сделаем 2-страничный сайт...например, о заработке в интернете. Сначала определимся, как это будет приблизительно выглядеть. Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое) сайта. Идея понятна? Приступаем. Запускаем Блокнот и пишем наш минимальный набор для создания страницы . Теперь напишем между тегами название нашей страницы, например, вот так Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете Далее разместим теги и , чтобы все содержимое нашего сайта было размещено по центру страницы. Если вы не забыли, теги и надо разместить между и , т.е. вот так Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую, чем мы проходили в HTML-уроке о таблицах . Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица: В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы. Для того чтобы сделать такую таблицу, напишите вот такой код

Т.е. код нашей страницы будет вот такой:

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов в первой строке таблицы, а не два, как при построении таблицы 2х2. Но зато появился параметр colspan="2". Этот параметр как бы говорит, какого размера должна быть ячейка. В данном случае ячейка должна быть шириной в 2 ячейки.

Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из расчета, что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет некомфортно.

Высоту таблицы сделаем 600 пикселей

Т.е. код нашей страницы теперь будет вот такой.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь у нас будет шапка
Здесь будет меню

Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например, вот так

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь у нас будет шапка
Здесь будет меню	Здесь будет содержимое страницы

Сохраните файл под именем index.html , для того чтобы его можно было просмотреть, как он будет выглядеть в браузере.

Теперь вставляем картинку шапки в наш сайт. О том, .

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Здесь будет содержимое страницы

Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Здесь будет содержимое страницы

ТАК .

Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Здесь будет содержимое страницы

Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в ту же директорию, где находится файл страницы.

А теперь прописываем нужный код

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Здесь будет содержимое страницы

Теперь наша страница будет выглядеть ТАК .

У вас, возможно, возник вопрос, почему браузер не "отрабатывает" ширину меню 200? Меню ведь выглядит шире, чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места, если начать писать текст в основном разделе страницы. (Или можно задать жестко ширину ячейки, в которой будем писать контент, дописав width="550" )

Чтобы подтвердить это, добавим текста на наш сайт.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню

Теперь все почти ОК...Почти, потому что налицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы, чтобы текст был расположен вверху ячеек.

Для этого нам надо прописать еще один параметр в теге меню и основного содержимого страницы.

Этот параметр мы не проходили в уроке о таблицах , - это параметр выравнивания по вертикали valign="top".

Значение top означает, что содержимое будет располагаться вверху.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь наша страница будет выглядеть ТАК .

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Главная	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Главная Ссылки	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь наш сайт будет выглядеть ТАК .

Осталось сделать вторую страницу сайта. Для того чтобы упростить работу, сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.

Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html.

Теперь изменим название страницы (между тегами и ), и изменим текст страницы, например, вот так

Главная	На этой странице будут размещены ссылки на сайты о заработке в интернете Сайт о заработке в интернете MoneyMaster

Вторая страница сайта будет выглядеть ТАК.

Возможно, у кого-то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код?

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

Если есть какие либо вопросы по этому примеру - пишите .

Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.

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

Для того, чтобы ваш сайт был доступен из интернет всему миру, надо найти , который предоставит вам место для вашего сайта. Хостинг бывает бесплатный и платный. Бесплатный хостинг дает вам также и адрес сайта. Так например, если вы зарегистрировались на хостинге narod.ru, указав при регистрации логин pupkin, то адрес вашего сайта будет http://pupkin.narod.ru Но бесплатные хостинги обладают кучей недостатков и их следует использовать лишь для тренировки. Если же делать серьезный сайт, то надо покупать и покупать хостинг, затем связать домен и хостинг (подробнее эти вопросы рассматриваются в книге MoneyMaster-3), тогда ваш сайт будет иметь желаемый вами адрес типа http://gadukino.ru (если домен не занят), и вы получите еще кучу преимуществ по сравнению с бесплатным хостингом, например, возможность использовать скрипты, что позволит вам создавать динамические сайты. После того как вы определились с хостингом и получили место для вашего сайта, надо перебросить файлы сайта на хостинг. Сделать это можно с помощью специальных FTP- программ, например LeapFTP, CuteFTP, или можно сделать с помощью файловых оболочек Windows Commander, Total Commander и др. можете скачать видео-урок, из которого вы узнаете, как сделать переброску файлов на хостинг.

ПОЗДРАВЛЯЮ!

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

Конечно, сделанный для примера сайт не так крут. И даже в этом сайте пришлось использовать готовые картинки, которые вы скорей всего создавать не умеете.

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

Этому вы можете научиться, пройдя обучение по книге MM-2.

Книга MM часть 2. УЖЕ СЕГОДНЯ вы сможете сделать СВОЙ приличный, эксклюзивный дизайн для вашего сайта , не теряя недели/месяцы на изучение учебников и прочих материалов, не воруя дизайн у других и не используя темплейты. ДАЖЕ ЕСЛИ ВЫ В ПРИНЦИПЕ НЕ ДИЗАЙНЕР - У ВАС ВСЕ РАВНО ПОЛУЧИТСЯ ПРИЛИЧНЫЙ ДИЗАЙН! Как сделать красивый сайт, даже если вы пока не дизайнер. Обучение необходимым навыкам и приемам для создания графических элементов сайта. Разновидности дизайна. Основы композиции сайта. Рекоммендуемые сочетания цветов. Создание макета сайта в Adobe Photoshop. Эффекты в Adobe Photoshop. Нарезка сайта в Image Ready. Верстка кода в DreamWeaver. Таблицы стилей CSS.

К сожалению, книга 2 не бесплатная, но я уверен, что вы не пожалеете о ее покупке. Наверняка до прочтения книги MM-1 вы и представить не могли, что, изучив ее, вы научитесь создавать простенькие сайты. Скорей всего, вам это казалось чем то очень сложным, "не для вашего ума". Но я вас провел по самой короткой дорожке к результату, держа вас как ребенка за руку. Точно так же, изучив MM-2, вы научитесь делать графический дизайн сайта, при этом, опять же пройдя по самой короткой дорожке, т.е. СЭКОНОМИВ ВРЕМЯ, не тратя месяцы на изучение различных книг. Потратив несколько вечеров на изучение MM-2, вы будете в силах делать свой дизайн для своих сайтов, значительно обогнав тех, кто решит купить книги в обычном магазине и будет месяцами их изучать.

Цена на книгу MM-2 также включает в себя цену на консультации. Да.
Каждый покупатель получает право на консультации в соответствующих закрытых разделах форума. Наверняка у вас будут появляться вопросы, а спросить некого. Покупая книгу - вы всегда будете иметь возможность задать вопросы и получить на них ответы от меня или от опытных учеников! При таком подходе ваше обучение будет максимально эффективным! При таком подходе вы максимально быстро научитесь делать сайты и зарабатывать с их помощью.

Если у вас совсем уж туго с финансами, то можете заработать необходимые деньги . Много там не платят, но для кого-то это будет спасительной соломинкой, чтобы купить книги.

Создание веб-сайтов не так ое сложно е дело, как кажется. Узнайте, как закодировать простую страницу с помощью HTML - язык а разметки для Web.

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

HTML - это основной язык разметки веб-страниц. Давайте изучим его основы, и попробуем создать простую страницу.

Введение в HTML

HTML - это язык гипертекстовой разметки.

Гипертекст - это текст, который работает как ссылка.

HTML определяет структуру веб-страницы, и обеспечивает ее надлежащее отображение в браузере. Документ HTML может быть очень простым или сложным, в зависимости от поставленных задач.

Веб-браузеры получают HTML-документы с веб-сервера, и отображают их как веб-страницы. Каждый браузер понимает HTML, и воспроизводит изображения, текст, видео, так, как это написано в коде.

HTML является основным языком разметки для Web. Однако он используется для создания статических веб-страниц, без интерактивности и анимации. HTML5, последняя версия HTML, немного лучше в этом смысле, особенно что касается видео или аудио.

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

HTML5 - один из мощных инструментов для разработки веб-страниц. С HTML5 потоковая передача мультимедиа возможна без использования сторонних плагинов, таких как Flash. HTML5 также поддерживает хранение данных на стороне клиента. Это можно использовать для поддержки веб-приложений, когда клиент находится в автономном режиме.

Веб и HTML

Сеть состоит из взаимосвязанных веб-страниц и приложений, а также изображений, видео, анимации и интерактивного контента. Языки разметки составляют основу Web. Эти языки используются с тех пор, когда сайты были очень простыми, и будут оставаться частью сети, ее развития и будущего.

HTML остается фундаментальным навыком для всех веб-разработчиков и дизайнеров.

Согласно обзору W3Techs, HTML - это язык, используемый на 74,3% всех сайтов.

Как создать простую HTML-страницу

Разработка HTML проста, и поэтому можно легко научиться кодировать простую HTML-страницу. Но для начала нужно изучить основы языка.

Кодирование HTML с помощью текстового редактора

Документ HTML - это в основном текстовый документ. Существует множество доступных редакторов текста, которые можно использовать для написания HTML. Два самых популярных: Dreamweaver и Sublime Text. Бесплатные редакторы - Notepad ++ для Windows и Text Wrangler для Mac. На самом деле сделать веб-страницу можно и в Microsoft Word, но делать это не стоит, поскольку он добавляет дополнительный и ненужный код в документы HTML.

Для примера мы будем использовать Notepad ++ в качестве редактора. Вы можете выбрать любой редактор по вашему выбору.

Создание и редактирование HTML

Создание нового документа HTML такое же, как и для любого другого типа документа. Выберите «Файл» - «Новый», чтобы открыть новый документ в Notepad ++. Внесите изменения в документ и нажмите «Сохранить».

Сохранение HTML

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

Если вы написали код в «Блокноте» и сохранили его как текстовый документ, то перевести его в html-страничку можно с помощью программы Total Commander. Выбираем команду «Переименовать» и меняем расширение файла из.txt на.html.

Формат HTML-страницы

HTML как язык состоит из элементов, тегов и атрибутов, которые определяют содержание сайта. Элементы HTML позволяют нам добавлять таблицы, изображения, видео, аудио и т. д. на веб-страницу.

Элементы HTML

Элементы определяют структуру и содержимое веб-страницы. Обозначаются угловыми скобками вокруг имени элемента. Содержимое, которое не находится между "", будет отображаться на веб-сайте. Элемент выглядит примерно так:

Теги

Элемент с угловыми скобками вокруг него образует тег (). Теги не отображаются на экране, но помогают браузеру понять, что он должен отображать. Открывающий тег отмечает начало элемента, а закрывающий тег отмечает его конец.

Например:

Открывающий тег:

Закрывающий тег:

Содержимое между открывающим и закрывающим тэгами является содержимым элемента.

Теги могут использоваться двумя способами:

Использование тегов в паре

Парные теги содержат открывающий и закрывающий теги. Вот как они выглядят:

Здесь какой-то текст

Существует открывающий тег () и закрывающий тег (), указывающий конец абзаца. Это означает, что все, что находится между этими двумя тегами, является абзацем.

Одиночные теги

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

Эти элементы пишутся так:

Закрытие / (косая черта) также не является обязательным. Это то же самое, что и при записи . Однако, чтобы избежать путаницы с открывающим тегом, рекомендуется добавить / (косую черту) в конце.

Атрибуты

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

Тег с атрибутом будет выглядеть так:

Тег «HTML» выше имеет атрибут «lang» со значением «en-US».

Структура документа HTML

Каждый HTML-документ имеет базовую структуру, определенную с помощью следующих элементов:

DOCTYPE или DTD: Декларация типа документа указывает версию используемого HTML. Этот тег помещается в начале документа.

HTML: Пара тегов HTML определяет начало и конец документа HTML.

Раздел HEADER < head>: этот раздел определяет общую информацию для страницы, и обычно короткий. Содержимое этого элемента не отображается на странице. Заголовок содержит тег TITLE, который определяет название документа, отображаемое в строке заголовка браузера. HEADER также может содержать метаданные, или ссылки на внешние файлы.

Раздел BODY : Этот раздел содержит основную часть страницы. Его содержимое отображается в браузере. Большая часть кода HTML-страницы находится внутри элемента body.

Кодировка: этот тег указывает кодировку, используемую в документе HTML. Кодировка указывает, как файл сохраняется, и как будут отображаться специальные символы. Общепринятым значением для этого тега является UTF-8, который позволяет отображать практически все символы языка.

Простая страница HTML

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

Шаг 1: Первая строка добавляемого HTML-кода указывает элемент DOCTYPE как «html». Это означает, что используется последняя версия HTML.

Шаг 3: Затем мы добавляем тег заголовка с тегом Title и сведениями о наборе символов.

Hello World

Шаг 4: После этого пишется тег BODY.

Hello World

Шаг 5: Теперь пустой HTML-документ готов. Давайте начнем добавлять текст для отображения. Мы добавляем тег заголовка и тег

Они определяют заголовок первого уровня и абзац под ним.

Hello World

Hello World

Простая страница HTML

Основная HTML-страница готова, и мы можем сохранить ее в папке по нашему выбору.

Просмотр страницы HTML

Чтобы просмотреть HTML-страницу, нам нужно открыть ее в браузере. Перейдите в папку, где был сохранен документ HTML, и дважды щелкните по нему.

Он откроется в браузере, и мы видим очень простую страницу. Вы можете проверить, что он показывает:

Заголовок как «Hello World»

Заголовок первого уровня как «Hello World»

Абзац с текстом «Простая страница HTML»

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

Расширенное форматирование текста

В HTML предусмотрены специальные элементы для специального форматирования текста.

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

Теги

используются для указания начала нового абзаца. Браузер обычно добавляет одну пустую строку между двумя абзацами.

Элементы форматирования используются для отображения специальных типов текста. Текст может быть отформатирован такими тегами:

Жирный –

Курсив –

Подчеркнутый –

Шрифт –

Полный список этих тегов доступен по ссылке .

Добавление ссылок

Это текст ссылки

Добавление изображений

Тег является одиночным тегом, без тега закрытия. Вы можете указать атрибуты изображения.

Атрибут src указывает местоположение изображения.

Атрибут style имеет много параметров, включая ширину и высоту изображения в пикселях.

Атрибут alt дает краткое описание изображения. Используется, если по какой-либо причине изображение не загружается.

Добавление заголовка

Тег является новым для HTML5 и указывает самый верхний элемент веб-страницы. Заголовки обычно содержат логотип компании, контактную информацию, ссылки навигации и т. д. В одном документе может быть несколько элементов .

Расширенные понятия в HTML

HTML - простая технология для изучения, поэтому многие дизайнеры просто работают, имея элементарные понятия. Если вы хотите в полной мере использовать HTML, вам нужно будет ознакомиться с передовыми концепциями. Это поможет вам создать привлекательный веб-сайт с меньшими усилиями.

Мы упомянем несколько концепций, которые помогут вам в дальнейшем. Вы можете продолжить изучать больше и использовать расширенный HTML и его возможности.

Проверка HTML-кода

Проверка HTML используется для проверки ошибок в коде HTML. Если ваша веб-страница не загружается, вы можете использовать проверку, чтобы найти причину проблемы.

Валидация также дает рекомендации по коду, который не соответствует последнему стандарту HTML. Недействительный HTML сделает сайт непригодным для использования. Это может вызвать проблемы с загрузкой или несогласованность вывода с различными браузерами. Многие сервисы проверки бесплатны, например, validator.w3.org

Добавление дополнительных тегов

HTML-тегов и атрибутов намного больше, чем мы здесь обсуждали. Два хороших ресурса для обучения - w3schools и HTML Dog, у которых есть больше учебников и полный список тегов.

Вы также можете использовать «Просмотр исходной страницы» в браузере, чтобы изучить код хорошо продуманных веб-сайтов и увидеть новые методы.

С помощью услуги веб-хостинга вы можете добавить несколько HTML-страниц на свой веб-домен. Вам может потребоваться программное обеспечение FTP-загрузки для передачи ваших HTML-файлов на веб-сервер. Есть много услуг веб-хостинга, которые предоставляют функцию FTP.

Добавление CSS и JavaScript

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

JavaScript - это язык программирования, и его можно использовать для добавления дополнительных функций HTML-страницам. Команды JavaScript вставляются между тегами . Они могут быть использованы для добавления интерактивных кнопок, выполнения математических расчетов и т. д.

Перед вами открывается удивительный мир веб-разработки. Дерзайте! Покорить эту вершину просто, нужно всего лишь начать.

Урок «Как создать HTML-страницу» посвящен верстке самой простой веб-страницы. Вы научитесь правильно сохранять HTML-файл, задавать необходимую кодировку для корректного отображения HTML-страницы в браузере и размещать на веб-странице тексты, списки, изображения.

После изучения этого урока Вы уже научитесь создавать первую web-страничку, как на рисунке 1.

Рисунок 1

1. Структура html-документа

Файлы html имеют расширение .htm или .html .

Обычно теги парные: начальный и конечный теги. Начальный - , конечный , например и

Парный тег называют еще контейнерный .

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

Структура html-документа выглядит следующим образом (рисунок 2).

Рисунок 2

Пояснения к листингу на рисунке 2

В первой строке конструкция DOCTYPE означает один из стандартов верстки web-страницы.

Между тегами и содержится заголовочная часть. В нее входит конструкция и . Это название при загрузке документа появляется в строке заголовка браузера (рисунок 3).

Рисунок 3

Запись означает кодировку кириллицы, чтобы буквы корректно отображались в браузере. Если кодировку не прописывать, шрифты иногда могут отображаться следующим образом (рисунок 4)

Рисунок 4

Та же страничка после вставки кодировки (рисунок 5)

Рисунок 5

Примечание: вместо кодировки charset="windows-1251" можно использовать кодировку charset=" utf -8" , которая позволяет создавать мультиязычные сайты, так как все существующие в мире символы в ней присутствуют. В этом случае в Notepad ++ необходимо до верстки и сохранения html -файла выбрать из верхнего меню Кодировки - Кодировать в UTF -8 без BOM (UTF-8 without BOM)

Для создания первого документа этой информации достаточно.

Практическое задание 1

1. Создайте папку, назовите ее my house . Имена всех папок и файлов необходимо создавать латинскими строчными буквами, русские названия использовать нельзя . Задавайте имена короткими и смысловыми.

Код web-страницы будем писать в Блокноте. Лучше пользоваться не тем Блокнотом, который идет в поставке Windows, а более «продвинутым», например Notepad++. Дистрибутив Notepad++ есть в папке CD/distr .

2. Откройте Notepad++. Убедитесь, что установлена кодировка ANSI, для этого в меню в пункте Кодировки , установите позицию Кодировать в ANSI .

3. Наберите в Notepad++ код из листинга на рисунке 2.

Код в листинге на рисунке 2 в дальнейшем будет служить нам шаблоном, чтобы каждый раз не набирать структуру html-документа. Конструкцию DOCTYPE скопируйте отсюда (запоминать и заучивать ее не надо).

4. Сохраните файл под именем shablon.html в папке myhouse , при этом в поле Тип файла установите All types (рисунок 6), иначе Ваша web-страничка потом не откроется в браузере.

Рисунок 6

5. После сохранения запустите shablon . html двойным щелчком. В результате Ваш файл будет выглядеть следующим образом (рисунок 7).

Рисунок 7

Если у Вас не получился результат, как на рисунке выше, значит, в коде скорей всего есть ошибка. Достаточно одного неверного символа и web-страница не будет отображаться корректно. Еще раз сверьте код с листингом на рисунке 2.

6. Внутри папки myhouse создайте папку public _ html . Таким именем обычно называется папка, в которой хранится сайт при размещении на настоящем хостинге (также эта папка может называться www).

7. Сохраните файл shablon . html в папке public _ html под новым именем main . html .

8. Из папки CD / html_css_1 откройте файл text_main.txt в Notepad++, а также откройте файл, сохраненный под именем main . html

9. Скопируйте весь текст из файла text_main.txt и вставьте в файл main . html вместо фразы «Содержимое web-страницы». В теге напишите слово «Главная». Вот так Главная.

10. Сохраните изменения и просмотрите файл main . html в браузере. Вы увидите неотформатированный текст. Даже переносы строк, которые есть в исходном тексте, браузер не делает (рисунок 8).

Рисунок 8

2. Форматирование web -страницы тегами HTML

В данном уроке «Как создать HTML-страницу» рассматриваются основные теги, которые используются для разметки веб-страницы.

Теги предназначены для форматирования текста web-страницы. Список тегов более подробно можно посмотреть в папке CD /Справочник HTML в справочнике html401_ru.chm (в верхнем меню пункт элементы ).

Рассмотрим некоторые из тегов.

Элементы h 1, h 2, h 3, h 4, h 5, h 6

Структурирование тела документа выполняется внутри элемента < body > с помощью заголовков, задаваемых элементами h1, h2, h3, h4, h5, h6.

Элементы заголовков являются парными, поэтому должны имеет открывающий < h 1> и закрывающий теги.

HTML располагает шестью уровнями заголовков: h1 (самый верхний), h2, h3, h4, h5 и h6 (самый нижний). Функции элементов заголовков подобны обычным стилям заголовков в текстовых редакторах.

Действие этих шести тегов представлено на рисунках ниже. На одном рисунке исходный код (рисунок 9), на другом - вид в браузере (рисунок 10).

Рисунок 9

Рисунок 10

Разделение текста на абзацы

Тег < p > задает начало абзаца и вставляет сверху абзаца расстояние - отступ для отделения этого абзаца от предыдущего.

Принудительный разрыв строки

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

Практическое задание 2

1. Отформатируйте заголовок «Каталог архитектурных проектов» с помощью тегов и .

2. Отформатируйте заголовок «Проекты для Вашего будущего дома» с помощью тегов и .

3. Отформатируйте заголовки «Проекты домов» и «Площади домов» с помощью тегов и .

4. Основной текст разделите на абзацы с помощью тега

Внутри первых двух абзацев используйте тег
для переноса строки. В результате Ваш код должен выглядеть следующим образом (рисунок 11).

5. Просмотрите результат в браузере.

Рисунок 11

Маркированные и нумерованные списки

Средствами HTML можно создавать любые списки: нумерованные (цифровые и буквенные) и маркированные с разными типами маркеров.

Тег < ul >… формирует маркированный список.

Тег < ol >… формирует нумерованный список.

Отдельный элемент списка как в

, так и в формируется с помощью тега < li > .

Практическое задание 3

1. Создайте нумерованный список под заголовком «Проекты домов».

2. Создайте маркированный список под заголовком «Площади домов». Ваш код будет выглядеть следующим образом (рисунок 12).



Рисунок 12

3. Просмотрите страницу в браузере.

Списки можно вкладывать друг в друга, используя при этом различные маркеры.

Пример вложенного списка приведен на рис. 13

Практическое задание 4

• Реализуйте в новом файле код, приведенный на рисунке 13.
• Сохраните файл в папке myhouse под именем spisok _ vlozh . html . Результат на рис. 13



Рисунок 13. Пример вложенного списка

Начертания шрифтов

Тег … - позволяет отобразить текст полужирным шрифтом.

Тег … - позволяет отобразить текст в курсивном начертании.

Тег … - отображает подчеркнутый текст.

Например:

В этом случае текст будет отображен жирным курсивом , но не подчеркнутым.

А в этом случае текст будет написан жирным подчеркнутым курсивом .

Нижние и верхние индексы

Тег < sub > и позволяет опустить текст на полстроки ниже обычного текста.

Тег < sup > и позволяет поднять текст на полстроки выше обычного текста. Текст, расположенный между этими тегами, будет изображаться меньшим шрифтом, по сравнению с обычным текстом.

Практическое задание 5

1. Отформатируйте в первом абзаце название myhouse.ru полужирным шрифтом (рисунок 14).

Рисунок 14

2. Отформатируйте во втором абзаце фразу «Более 95% проектов» подчеркнутым курсивом (рисунок 15).

Рисунок 15

3. Отформатируйте верхние индексы в тех местах, где используются квадратные метры (рисунок 16).



Рисунок 16

4. Сохраните файл. Просмотрите через браузер. Web-страница должна выглядеть следующим образом (рисунок 17).



Рисунок 17

3. Вставка изображений

В нашей статье «Как создать HTML-страницу» мы рассмотрим, как размещать на веб-странице изображения.

Для вставки изображений используется тег . Обязательным для этого тега является атрибут src (от английского SouRCe - источник). Он определяет путь до графического файла, изображение которого должно быть выведено на web-странице.

Для вставки изображения используется команда

Например: " image1.jpg " alt="Картинка" />

Атрибут alt необходим для того, чтобы при просмотре web-страницы в режиме отключенных изображений, вместо отсутствующей картинки была надпись, которая прописана в атрибуте alt. Также alt-тексты рекомендуется использовать всегда, т.к. поисковые машины анализируют их как ключевые слова при поиске изображений.

Графические файлы могут быть в формате jpg, gif, png и обязательно в цветовой модели RGB .

Практическое задание 6

1. После списка площадей домов вставьте в web-страницу изображения проектов коттеджей project _1.jpg и project _2.jpg из папки CD/ html_ css _1 . Для этого сначала скопируйте два этих изображения в ту папку, в которой расположен файл main.html. Код вставки изображений будет выглядеть следующим образом (рисунок 18).

Рисунок 18

2. Просмотрите результат в браузере (рисунок 19).



Рисунок 19

В основном принцип использования тегов HTML должен быть понятен. Они используются по одному и тому же принципу: если тег контейнерный, то есть открывающий и закрывающий тег. Если тег одиночный, то закрывающего тега нет, в этом случает правый слэш пишется до закрывающей угловой скобки, например < br />. Является ли тег контейнерным или одиночным Вы всегда можете посмотреть в спецификации html401_ru.chm в разделе «элементы».

4. Адресация внутри сайта

В нашем первом уроке «Как создать HTML-страницу» мы разберем понятия адресации в HTML.

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

Существует два вида адресации:

• абсолютная;
• относительная.

Абсолютная адресация (с использованием названий дисков компьютера) не используется (рисунок 20)



Рисунок 20

Используется относительная адресация - адресация в пределах документа или совокупности документов на одном сервере. Чтобы сослаться на файл внутри сайта, нужно указать браузеру, какой путь он должен проделать, что бы прийти к нужному файлу.

Пример 1 Изображение расположено в одной папке с HTML-документом (рисунок 21). То есть изображение и HTML-файл находятся на одном уровне в файловой системе и HTML-документ может сразу присоединить изображение. В этом случае вставка изображения в web-страницу будет выглядеть следующим образом. / > Рисунок 21 Практическое задание 7 Реализуйте пример 1 (создайте папку, файл doc.html, возьмите любое изображение). Изображение

Пример 2 Изображение pic . jpg находится в папке folder _1 . HTML-документ расположен за пределами папки folder_1. Т.е. в файловой системе сайта HTML-документ расположен на один уровень выше, чем изображение (рисунок 22). Необходимо войти в папку folder_1, затем присоединить изображение Рисунок 22 Практическое задание 8 Реализуйте пример 2 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 3 Изображение pic . jpg находится в папке folder _1 , которая в свою очередь лежит в папке folder _2 . HTML-документ расположен за пределами этих папок (рисунок 23). Таким образом, HTML-документ расположен на два уровня выше, чем изображение. Необходимо: войти в папку folder_2, затем войти в папку folder_1, затем присоединить изображение. Рисунок 23 Практическое задание 9 Реализуйте пример 3 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 4 folder _1 . Изображение находится за пределами папки folder_1. Т.е. HTML-документ расположен на один уровень ниже, чем изображение (рисунок 24). Необходимо выйти из папки folder_1, затем присоединить изображение. Выход из папки обозначается конструкцией ../ (две точки и слэш вправо). / > Рисунок 24 Практическое задание 10 Реализуйте пример 4 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 5 HTML-документ находится в папке folder _1 , которая в свою очередь находится в папке folder _2 . Изображение находится за пределами этих папок. Таким образом, HTML-документ расположен на два уровня ниже, чем изображение (рисунок 25). Необходимо: выйти из папки folder_1, выйти из папки folder_2, присоединить изображение. Так как надо выйти два раза, то и конструкция ../ повторяется два раза. / > Рисунок 25 Практическое задание 1 1 Реализуйте пример 5 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 6 (рисунок 26) Необходимо: выйти из папки folder_1, выйти из папки folder_2, зайти в папку folder_3, зайти в папку folder_4, присоединить изображение pic.jpg Рисунок 26 Практическое задание 1 2 Реализуйте пример 6 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 7 (рисунок 27) Необходимо: выйти из папки folder_1, выйти из папки folder_2, выйти из папки folder_3, войти в папку folder_4, присоединить изображение pic.jpg. Так как выйти надо три раза, то и конструкция ../ повторяется три раза. Рисунок 27 Практическое задание 1 3 Реализуйте пример 7 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html. Таким образом, сколько раз надо выйти, столько раз ставим конструкцию../, а если заходим, то перечисляем имена встречающихся на пути папок.

Практическое задание 1 4

1. Создайте html-документ и вставьте в него изображение, чтобы путь к изображению был следующим.

" ../../../../../../folder_1/folder_2/folder_3/image.jpg " / >

2. Разработайте собственный пример вставки изображения в html-документ, чтобы он содержал и выход из папок, и вход в папки. Пример должен отличаться от всех вышеприведенных примеров.

В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:

• shablon.html
• main.html
• spisok_vlozh.html
  
• внутри папки myhouse должна быть папка public _ html с файлами будущего сайта
• семь примеров на относительную адресацию и два примера в качестве контрольных из практического задания 14

: HTML - язык разметки гипертакста (или язык гипертекстовой разметки).

Так давайте познакомимся с ним поближе.

Для начала создайте у себя на компьютере файл с любым названием и расширением.html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").

Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем - index.

При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).

Теперь откройте этот файл через блокнот и скопируйте туда такой код.

Это первая web-страница!

Сохраните и откройте через браузер.

Поздравляю, вы только что создали свою первую web-страницу.

Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница!!!". сохраняем, обновляем браузер, любуемся результатом.

Но у нашей страницы нет загаловка.



Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги и .

Первая страница Это моя первая web-страница!!!

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



Описание тегов.

Самый первый тег это (этот тег парный, т.е. закрывающий тег обязателен) - он используется как контейнер, внутри которого находится все содержимое страницы (текст, изображения и прочее). Хотя этот тег ( и ) необязателен, но его использование говорит о правиле хорошего тона. Поэтому и вам советую его использовать.

Следующий тег - . Это тоже парный тег ( и ). Этот тег не отображается на странице (кроме заголовка), но он необходим для указания дополнительный параметров страницы - описание страницы (используется поисковиками), ключевые слова (используется поисковиками), стили, скрипты, заголовок и прочее.

Тег - парный тег ( и ), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега !

И последний, в нашем коде, тег - . Тоже парный тег ( и ), внутри которого находится вся видимая часть сайта, т.е. тексты, картинки, ссылки, в общем информация которую вы хотите разместить на сайте.

В следующем уроке мы поговорим о видах тегов и правило их написания.