Как создать сайт новичку с нуля урок 1-й

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

Первое с чего мы начнем – это запомним, что любой документ, который у нас будет отвечать спецификации html, должен обязательно начинаться со строки объявления версии нашего html. По основам html вы также можете почитать мою статью про общие понятия html, там я уже писал также, что каждый html документ состоит из тегов, так называемых указателей для браузера, как нужно отображать ту или иную информацию в дальнейшем вы в этом убедитесь. Так вот возвращаюсь к началу абзаца про объявление версии нашего документа. Записывается это объявление обычно вот такой вот строкой.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

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

Внутри тегов html наш документ напоминает тело, как у человека. Он также состоит из головы & и туловища & . В голове документа находится своеобразный мозг, который состоит из title – заголовка документа, а также техническая информация типа таблицы стилей, которую мы разберем в будущих уроках информации о ключевых словах и описании вашего сайта.

Так вот если обобщить изученную нами информацию, то мы получим вот такую структуру документа:

структура html документа

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

Для начала нам понадобиться создать папку на рабочем столе. Назвать ее можно как угодно, я назвал ее my site.

Теперь открываем блокнот, пуск-> программы-> стандартные-> блокнот. Также я рекомендую вам скачать программу Notepad++ потому что в ней удобнее редактировать код. Если же качать не хотите, то пользуйтесь обычным блокнотом.

Нам необходимо написать вот такой код:

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

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

Обратите внимание что в документе я использовал тег

Этим тегом указываются заголовки в вашем документе. Тег title тоже является заголовком, но он отображается лишь тогда, когда ваш сайт выводится на странице поисковика, его также можно посмотреть в самой верхней полоске вашего браузера, если это Internet Explorer или Mozilla Firefox то она имеет синий фон.

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

Понравился пост? Зацени другие:

Один отзыв на «Как создать сайт новичку с нуля урок 1-й»


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *