04:35 Урок 1 - Знакомство с html. Как сделать сайт на html, пример создания html-страницы сайта | |
Знакомство с htmlВ любом браузере нажмите правой кнопкой мыши на любом месте на странице сайта и выберите из выпадающего меню "исходный код страницы". Перед Вами откроется html-код страницы. Каждая страница сайта, которая есть в интернете, имеет свой код. Наверное, открыв html-код сайта, Вы могли испугаться тому, что многое из написанного кажется непонятным и сложным. Но это всего лишь иллюзия сложности. На самом деле, разметка HTML довольно простая (даже школьники на уроках информатики её осваивают без проблем). Суммарное число html тегов не так уж и велико. Плюс к тому же все страницы одного сайта, как правило, очень похожи друг на друга (отличия заключаются лишь в контентной части). Давайте сразу рассмотрим простенький пример создания html-страницы, чтобы начать наше изучение. Создание простого html-документа в блокноте1) Для того чтобы сделать свою первую html страницу откройте блокнот и сохраните его под каким-то именем (например, index.html). Это важно: тип файла необходимо выбрать "все файлы", а после имени дописать ".html" или ".htm", но лучше придерживаться первого варианта (хотя разницы нету). Должно получиться следующие имя: "index.html". В принципе это уже можно назвать html документом, однако в нем ничего нету, поэтому переходим к шагу два - наполнение страницы. 2) Отрываем созданный файл через блокнот и вписываем в него следующее (просто скопируйте): <html> <head> <title>Пример создания страницы html в блокноте</title> </head> <body> У меня получилось сделать первую страницу! </body> </html> После этого сохраните этот файл. Теперь откройте index.html через любой браузер, в отрывшейся вкладке должна появиться надпись "У меня получилось сделать первую страницу!", а в заголовке будет написано "Пример создания страницы html в блокноте". Такой документ можно уже выкладывать в интернет. Как видите, ничего сложного нет, все просто. Теперь вкратце поговорим о структуре любого html-документа. Структура html-документа1. Любой html документ должен иметь теги <html> ... </html> <html> - открывающий тег документа (располагается самым первым), </html> - закрывающий тег документа (должен быть самым последним). Вообще в html практически все теги состоят из двух элементов: открывающий <ТЕГ> и закрывающий </ТЕГ>. Теги можно писать с большой буквы, а можно и с маленькой, поскольку браузеры не воспринимают регистры. То есть, если Вы напишите так: <HtMl> ... </hTMl> То это будет равносильно тому, что было написано чуть выше, но никому не рекомендую так писать. Придерживайтесь одного из двух стилей: либо все теги с маленькой буквы, либо с большой. 2. Любой html документ можно разделить на две части - Заголовок страницы. Это невидимая для пользователя часть страницы, не является обязательной (однако, для продвижения сайта и оптимизации кода страницы она очень важна). Синтаксис заголовочной части: <head> ... заголовочные теги ... </head> Между тегами <head> и </head> располагаются следующие элементы:
Все эти элементы подробно разобраны в специальном уроке по заголовочным тегам » Примечание: заголовочные теги обязательно должен располагаться перед телом страницы! Сразу после закрывающего тега </head> должно идти основная часть страницы. - Тело страницы (или основная часть). Является видимой для пользователя частью. Её синтаксис: <body> ... Здесь располагается контент страницы ... </body> <body> - открывающий тег тела страницы. Сразу после него идет то, что видит пользователь: дизайн и контент страницы. Тело и, собственно, весь html-документ должны заканчиваться последовательностью: </body> </html> Все теги, которые можно писать в этой части рассмотрены в уроке 3 - самые основные html теги. Уважаемый читатель, я думаю, что теперь Вы имеете небольшое представление о html-документе. Далее Вам предстоит узнать множество других тегов, которые необходимы для работы. Это был вводный урок, целью которого было ознакомление с html. Теперь советую перейти к следующим урокам. Следующий урок: Урок 2. Пример создание простой html-страницы | |
| Категория: Все о сайтах | Просмотров: 487 | | |
| Всего комментариев: 0 | |