Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.
Вам скорей всего уже известно, что основным языком Internet-а является язык гипертекстовой разметки HTML (HyperText Markup Language) . В этой статье мы узнаем базовые понятия HTML и научимся создавать простейшие WEB-страницы.
Начнем с самого главного, рассмотрим как работает сама всемирная паутина — Internet . Для получения веб-страниц, вы создаете файлы, написанные на языке HTML, и помещаете их на веб-сервер. После этого любой браузер установленный на устройстве с доступом в Интернет, будь то компьютер, телефон или планшет, может отыскать ваши веб-страницы.
Веб-сервер — это обычный компьютер со специальным программным обеспечением, имеющий доступ в Интернет. Он непрерывно ожидает запросов от браузеров на веб-страницы, изображения, аудио- и видео-файлы. Получив запрос на один из таких ресурсов, сервер ищет его и высылает браузеру.
Браузер — это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам. Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы. С помощью команд — тегов , HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например
,
,
Шапка сайта | |
Подвал сайта |
Укажите размеры ячеек. Попробуйте сделать те размеры, которые указали мы, а затем решите, какие размеры нужны вам. Размеры впишите в коды каркаса (это параметры height – высота и width - ширина).
Выберите шапки, фона и подвала сайта, вставьте их в нужные теги. Картинки вставляются с помощью тега . Теперь надписи «Шапка слайда» и «Подвал сайта» должны исчезнуть.
Соедините все вставленные картинки воедино. Для этого в тег
Таблица будет иметь следующий вид:
8 и 33 — сроки открывают и закрывают таблицу;
14 и 21 — строки открывают и закрывают строку в данной таблице;
15, 16, 17, 18 строки – открывают и закрывают столбец;
22 и 25 строки — открывают и закрывают столбец. При этом атрибут colspan=”1” – количество столбцов, width=”170” и height=”317” – ширина и длина ячейки;
27 и 30 — опять открывают и закрывают столбец. В данном случае атрибут colspan=”3” — ячейка растягивается на 3 столбца. Ее размеры составляют: width=”510” и height=”317”.
Таким способом и происходит создание страницы с помощью таблиц.
Если убрать в 8-ой строке атрибут border=”1”, то таблица станет невидимой, что мы и сделаем.
Чтобы создать шаблон сайта потребуется программа Adobe Photoshop.
Открываем программу и создаем новый документ «Файл» — «Новый».
Указываем ширину, высоту, разрешение, цветовой режим, фон.
Прописываем все так, как показано здесь:
Откроется пустой документ. Теперь надо сделать подобно тому, как в документе html. Разбиваем его на ячейки таблицы, используя направляющие.
Для отображения линейки, включаем ее «Просмотр» — «Линейки» и прямо с линейки вытаскиваем направляющие и создаем шаблон, как на рисунке:
Для большей наглядности выбираем фон нашего сайта и закрасим его, например зеленоватым цветом. Для этого необходимо в Photoshop создать новый слой, кликнув на панели инструментов «Палитра цветов» и прописываем тот цвет, который мы выбрали. Зажмем горячие клавиши Alt + Backspace и документ окраситься в тот цвет, который мы указали. Таким способом можно выбирать любой цвет.
Продолжим делать сайт в html. Теперь надо разметить меню сайта, шапку, кнопочки и т.д.
Создадим новый слой, для чего берем инструмент «Прямоугольная область». Выделяем шапку сайта и, зажав клавиши Alt + Backspace, закрашиваем шапку. Затем нажимая Ctrl + T один раз, зажав клавишу ALT, уменьшаем шапку.
Должно получиться что-то на подобие:
Похожим образом, делаем и другие области сайта. Можно изменить цвет, сделать рамку у блоков, добавить тень, наложить градиент. Для этого выделяем слой с зажатой клавишей Ctrl и используем функции Photoshop.
Выбираем необходимую функцию, например: обводка. Указываем ее размер в пикселях и цвет.
Подобным образом создаем другие элементы на сайте.
На кнопочках прописываем названия, можно прописать и в html, а можно сразу сделать графичные кнопочки. Выбираем инструмент «Текст» и на кнопках делаем надписи. Например: Главная, Услуги, Контакты и т.п.
Добавляем картинку в шапку сайта и простым перетаскиванием картинки, размещаем ее в верхнем блоке сайта. Изменить размер картинки можно с помощью Ctrl + T.
В итоге получим готовый шаблон сайта:
Разрежем шаблон на части и сохраним все в отдельной папке в нужном формате.
Берем инструмент «раскройка» и выделим каждую область сайта.
Все сохраняем. Идем в меню, выбираем «Файл» —> «Сохранить для Web». Сохраняем в формате.jpeg или.png.
В итоге: на рабочем столе – папка с готовыми блоками будущего сайта. Перенесем эти файлы в нашу папку с сайтом.
Переходим к самому главному – созданию html страницы. На этом этапе надо разместить все части шаблона в документе, добавить текст для главной страницы, прописать меню и т.д.
Ниже приводится окончательный результат:
Я думаю, что здесь не сложно разобраться, что к чему.
10 строка – прописываем шапку сайта атрибутом background;
15, 16, 17, 18 – вставляем кнопки и прописываем ссылки;
22 строка – прописываем фон меню атрибутом background;
23 – 28 строчки – прописываем пункты меню сайта;
33 строка – текст сайта.
Оказывается, что ничего сложного в создании сайта на html нет.
В итоге мы узнали, как сделать сайт в html.
Вот и все, наш сайт готов!
Да, это, конечно, простая страница, созданная на html.
Но вы уже знаете, как делается шаблон и верстка, а значит можете приступить к изучению более сложных способов усовершенствования сайта.
Попробуйте и начните с малого, и если вы научитесь создавать простые страницы, со временем вы сможете создать нечто большее. Самое главное – не бросайте обучение, тогда в скором времени вы научитесь создавать профессиональные сайты.
Рекомендую:
Господа, хорошего всем настроения) Сегодня решил написать статью на тему — Как создать свою веб-страницу. На эту тематику меня натолкнули читатели и друзья, которые почему-то до сих пор не различают типы сайтов и страниц в сети Интернет. Очень редко что-либо называю веб-страничкой))) Однако, многие мои друзья так часто говорят. Специально для них я решил описать основные типы веб-страниц, которые вы можете создать для себя, чтобы иметь некое представительство себя онлайн.
Перед созданием веб-страницы, вам обязательно надо создать email или электронный адрес. Я описывал варианты создания в этой статье — . А если электронный адрес у вас есть, то последуем к вариантам создания вашей личной веб-страницы. Читайте способы, которые помогут создать свою веб-страницу.
Одностраничный сайт
Самый древний способ))) Для него Вам надо изучить основы языка HTML. Делать это в наше время совсем необязательно, существует миллион сервисов, речь о которых пойдет ниже. Однако, если вы хотите понимать — как работает сайт и, частично, сеть Интернет, то попробуйте создать одностраничный сайт самостоятельно. О том, как это сделать я описывал в статье — . Там есть варианты создания одностраничного сайта с помощью конструкторов сайтов и бесплатных платформ.
Страница в социальной сети Вконтакте
Думаю, в наше время фраза: «я создал себе страничку в Интернете» относится больше всего к социальной сети Вконтакте. VK — самая популярная социальная сеть в СНГ. Создать здесь свою страницу — дело 1 минуты. Более того, для вас открывается десятки полезных функций для деятельности в сети Интернет.
Про Вконтакте я писал много и планирую писать еще больше)) С этой социальной сетью вы сможете и .
Вконтакте также позволяет создавать удобный URL-адрес к вашей веб-странице, вместо стандартного URL-адреса при регистрации http://vk.com/id8032931. Затем вы можете поменять его на красивый — http://vk.com/vasheimya.vashafamiliya.
Страница в социальной сети Facebook
Если Вконтакте самая популярная социальная сеть в СНГ, то Facebook — социальная сеть №1 во всем мире. Фейсбук, считается, вроде как для продвинутых русскоязычных пользователей))) Но лично я думаю, что это все из-за того, то Facebook очень популярен и удобен.
Также как и в Вконтакте, вы можете присвоить себе красивый адрес своей веб-страницы. Полный мануал — как создать веб-страницу на Facebook, я описал в статье — .
Блог
Блог — самый рекомендуемый мною вариант создания своей веб-страницы. Блог дает тысячи возможностей самореализации и очень удобен в обращении. Часто также бесплатен, как веб-страницы в социальных сетях.
Предлагаю подборку статей по созданию веб-страницы с помощью блога:
- — быстрый, но с затратами на хостинг и отдельный домен.
- — блог-платформа от Google. Интегрирована со многими гугловскими сервисами. Очень удобно, если Вы фанат Google))
- — самая динамично развивающаяся блог-платформа. Я читал в одном из американских изданий статистику о том, что Tumblr у детей США 12-13-ти лет популярнее Фейсбука!!! Думаю, это показатель удобства и развития этой платформы.
- — здесь указаны мануалы по практически всем известным блог-платформам, включая и вышеуказанные.
Дневник
Вот все основные варианты создания вашей веб-странички, или, по-другому, веб-присутствия. Буквально 1 минута и вы уже погружаетесь в пространство всемирной паутины. Удачного веб-странининга!
Всем привет, дорогие друзья и гости моего блога! Ой. Я только что заметил, что Яндекс наградил меня ТИЦ 20, хотя еще вчера был 0. Я понимаю, что ТИЦ уже ничего толком не значит, но всё равно очень приятно и радостно. Ну а вообще я хотел продолжить недавно начатый цикл статей по сайтостроению. И первое, с чего я бы хотел начать — это с основ языка гипертекстовой разметки (не программирования!) HTML.
HTML — это всё таки основа всего и даже если вы не будете крутым веб-разработчиком, а будете делать свои сайты на движках, то знание языка HTML будет огромным и жирным плюсом. Поэтому в своей сегодняшней статье я хочу рассказать вам, как создать сайт html через блокнот.
Конечно то, что мы сегодня сделаем трудно будет назвать сайтом, поэтому сразу говорю, что сегодня мы не создадим крутой сайт, но я вам расскажу структуру, как всё происходит при таком способе создания собственного веб-ресурса. Я думаю, что у вас не должно возникнуть трудностей. В итоге мы создадим самую наипростейшую веб-страницу для начала. И если вы готовы, то поехали!
Для начала создайте обычный текстовый документ или откройте блокнот. Для открытия блокнота можете вызвать строку «Выполнить» и вписать туда notepad. Открыли? Молодцы!
Любой html-документ или сайт размечаются с помощью специальных тэгов. Тэг — это специальный знак, который дает команду сайту, как правильно нужно отображать тот или иной кусок содержимого, заключенный в него. Сейчас я подробно на этом останавливаться не буду, так как о тэгах я собираюсь рассказать вам в своей .
Скажу лишь, что большинство тэгов парные, то есть сначала ставится открывающий, а после того, как мы написали информацию, надо закрыть тег. Закрывается он точно также как и открывается, только перед закрытием надо поставить знак «/».
В общем для функционирования нам нужно проставить несколько обязательных тэгов. Давайте посмотрим, что они из себя представляют.
- — это главный тэг, благодаря которому мы говорим сайту, что сейчас будем писать тут на языке HTML, так что пусть не беспокоится. С него должен начинаться сайт и им же закрываться.
- — сюда заносится служебная информация, например название документа, описание и многие другие. Ставится сразу после открытого тэга .
— Между этими значениями мы пишем заголовок страницы, то есть это название будет отображаться не в самом содержимом сайта, а во вкладке браузера. Данный тип ставится между и .- — этот тэг отвечает за отображение содержимого на сайте. То есть всё, что вы напишите между этими тэгами будет отображаться на веб-странице.
Я так чувствую, что не все всё поняли, и у некоторых осталась каша в голове, поэтому я всё покажу вам на живом примере.
Живой пример
Итак создаем текстовый документ и пишем там следующее содержимое:
Написали? Молодцы! Тут я дал вам информацию специально в виде картинки, а не в виде текста, так что вы ее не скопируете. Вот я негодяй, да?)) Обратили внимание, что тэги вкладываются друг в друга как матрешки? Так и должно быть.
Совет! Старайтесь все таки не копировать содержимое, а переписывать его своими руками. Таким образом вы намного лучше и быстрее усвоите весь материал.
После этого сохраните ваш документ в формате html. Для этого при сохранении, после того как вы назвали ваш документ, ставьте точку и пишите html. То есть у вас должно получиться index.html. Тогда ваш документ автоматически сохранится уже не в виде текстового документа, а в виде веб-страницы. И еще при сохранении документа измените кодировку на UTF-8 Вы можете открыть этот файл с помощью любого браузера. Давайте это сделаем и посмотрим, что у нас получилось.
Смотрите, сколько мы всего написали, а в итоговом документе остался только наш приветственный текст. Почему? Да потому что сами по себе тэги не отображаются в итоговом варианте, а показываемая информация отображается только между тэгами body . Поэтому всё так и получилось. Зато смотрите, то что мы писали в head, точнее в title, теперь отображается во вкладке браузера.
Если вы захотите вновь что-то редактировать здесь, то вам достаточно будет открыть уже этот сохраненный документ снова в блокноте. В общем смотрите, таким образом с помощью блокнота мы сделали первый наш сайт. Да...сайтом это сложно назвать, но по сути это так. Мы сделали основу (каркас) и если мы закинем это на хостинг, то он уже будет отображаться в интернете.
Но попробуйте поставить несколько пробелов и написать еще текст, либо просто напишите несколько строчек текста и сохраните это в том же документе.
Теперь войдите в этот документ с помощью браузера. Что мы видим? А то, что ваши пробелы и переносы строк не повлияли на документ и все идет одной строкой. Некрасиво, да? А всё потому, что html сам по себе не понимает ваши пробелы (кроме одного) или переносы. Для того, чтобы переносить строки всё нужно размечать другими тэгами, о которых мы будем говорить в других статьях.
Многие наверное подумают что-то типа: «И это по твоему сайт? Да ты с дубу рухнул». Да, дорогие мои. Эту примитивную веб-страницу также можно назвать сайтом. И я еще раз повторюсь, что смысл данной статьи был не создать мегакрутой сайтище, а показать вам основу любого сайта, как это выглядит, как всё происходит.
Но вы не волнуйтесь. Это всё вводные уроки. Далее мы всё глубже и глубже погрузимся в html разметку, и сможем всё правильно форматировать, расставлять. В общем всё будет круто и мы сделаем полноценный веб-ресурс. Просто в одну статью всё это не уместится, а комкать и сокращать я тоже не буду, иначе фигня получится.
Специальный блокнот для веб-разработчика
Но все же мы больше не будем пользоваться этим доисторическим средством, так как для разработчиков есть более удобный и навороченный блокнот, причем абсолютно бесплатный. Скачайте его отсюда и установите самым обычным способом.
В дальнейшем я буду работать именно через редактор Notepad++. Установите его и вы поймете, почему это удобно. Настроек там премудрых нет, но если вдруг вы установили английскую версию, то зайдите в меню «Preference» и в графе «Localization» выберите Русский.
Да, и еще зайдите в меню «Кодировка» и выберите «UTF-8» . Ну и сразу сохраните этот файл в формат html. Для этого выберите меню «Файл» — «Сохранить как» и обзовите документ index, выбрав из из выпадающего списка формат «html» . Это делается для того, чтобы программа поняла, что мы делаем и подсвечивала нам нужные теги и команды.
А почему я вообще называю страницу index? Дело в том, что когда вы заходите на любой сайт, то по умолчанию он ищет страницу index.html или index.php. Именно эти файлы общеприняты как главные, но вообще это можно и изменить на сервере.
Конечно, если вы хотите всё изучить побыстрее, то рекомендую вам посмотреть недавно вышедший курс по HTML5 и CSS3 . Там все подробно рассказывается и показывается на живом примере, кроме того вы научитесь делать несколько видов сайтов. В общем очень интересные и информативные уроки.
Ну а вам я рекомендую подписаться на обновления моего блога, чтобы не пропустить следующих уроков, а также других интересностей. Кроме того обязательно посмотрите и другие статьи моего блога. Я уверен, что многие из них окажутся для вас полезными. В общем желаю вам удачи. Увидимся в других статьях. Пока-пока!
С уважением, Дмитрий Костин.