Простой сайт как сделать – Как создать сайт бесплатно самому с нуля? Есть 3 способа!

Как сделать простой веб-сайт за один час / Habr

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

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

В реальности, достаточно всего одного часа, чтобы сделать веб-сайт. Я это знаю, потому что засёк время, когда сам выполнял нижеследующие действия, и весь процесс занял чуть меньше часа (я даже зарегистрировал новый домен и создал новый аккаунт на Github для чистоты эксперимента). Код этого сайта тоже можно посмотреть на Github.

1. Идёте на namecheap.com и регистрируете домен. Этот шаг только в том случае, если нужно собственное доменное имя.

2. Создаёте аккаунт Github и скачиваете Git, если это ещё не сделано.

3. Создаёте директорию для размещения веб-сайта и перемещатесь туда командой cd: это команды mkdir my-site && cd my-site. Все будущие команды предполагают, что вы внутри рабочей директории.

4. Делаем новый репозиторий Github для сайта под названием yourusername.github.io. Например, я зарегистрирован под именем smilli, так что мой репозиторий называется smilli.github.io.

5. В рабочей директории запускаем git init и git remote add origin github.com/username/username.github.io.git, где вместо ‘username’ указываем свой имя пользователя.

6. Создаём файл ‘index.html’ в папке с сайтом с HTML-кодом главной страницы. Здесь необязательно тратить много времени, он может быть весьма лаконичным.

<html>
<head>
  <title>YOUR SITE TITLE</title>
  <-- Add some style to your site, see http://getbootstrap.com for details -->
  <link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
  <h2>YOUR SITE TITLE</h2>
  <p>Your text blahblahbhalbha</p>
  <p>Another paragraph!  Maybe more text!</p>
</body>
</html>

7. Пишем в коде главной страницы любой текст. Изменения отображаются локально командой python -m SimpleHTTPServer 8000
и набором адреса localhost:8000 в браузере.

8. Теперь запускаем следующие команды:

git add .
git commit -m "Initial commit"
git push -u origin master

9. Идём на yourusername.github.io. Здесь вы должны увидеть свой сайт! Поздравляю, вы что-то опубликовали в онлайне.

10. Если хотите собственное доменное имя, создаёте файл ‘CNAME’ (всё прописными буквами). Туда добавляете одну строчку ‘'yourdomainname.com' (без http или www). См. подробности конфигурации CNAME здесь.

11. Как и раньше, отправляем все изменения на Github.

git add .
git commit -m "Add CNAME"
git push

12. Теперь авторизуетесь на namecheap.com и щёлкаете по доменному имени, которое нужно, в списке своих доменов. Список будет примерно таким:

После выбора домена, появится ссылка «All Host Records» в левой панели во вкладке «Host Management». Нажмите на неё. Теперь вы увидите настройки по умолчанию, которые Namecheap указал для вашего сайта.

Измените настройки следующим образом (заменив ‘username’ на своё имя пользователя, конечно).

13. После вступления в действие изменений в DNS вы сможете увидеть свой сайт на своём домене! Поздравляю. 🙂

habr.com

Как сделать простой сайт самостоятельно и бесплатно? — 🚀 Land-site.ru

Довольно часто новички задаются вопросом «как сделать простой сайт?», но не находят точного на него ответа. Поскольку само понятие «простоты» нелогичное. Один пользователь подразумевает под простым веб-ресурсом одно объяснение, другому новичку обычным интернет-сайтом может казаться в действительности многостраничный и многофункциональный проект. Но в любом случае, если человек задается подобным вопросом, в области программирования и веб-дизайна он точно не является специалистом. Также для новичка некоторый функционал может показаться элементарным в исполнении, хотя в действительности для его реализации приходится проделывать работу огромного объема. К чему мы ведем? Важно, что пользователь вкладывает в понятие «создание простого сайта».

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

Простой веб-сайт — что это?

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

Порекомендовать таким пользователям мы можем либо конструкторы, либо самые современные ЦМС, в которых панель администрирования «напичкана» всеми необходимыми функциями, но работать с ними можно элементарным образом. Единственная проблема заключается в том, что в погоне за простотой можно наткнуться на абсолютно не функциональную площадку для создания интернет-сайтов. Допустим, площадка может предлагать создать сайт за 10 кликов даже новичку, но в ней отсутствует функционал для поискового продвижения сайта, элементарной публикации медиа-контента, изменения шаблона и так далее. Такие проекты стоит обходить стороной, поскольку подобная простота приведет к одному — ваш проект будет напоминать веб-сайт, созданный в 90-х годах. Заниматься его администрированием сможет каждый, но потенциала для развития не будет.

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

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

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

Одностраничный сайт на HTML

Для начала стоит понять, что вы вкладываете в вопрос на тему «как сделать одностраничный сайт на HTML?» На HTML пишется Landing Page. Перед вами стоит выбор — использовать готовый шаблон, скачанный из интернета, написать его самостоятельно, либо заказать в веб-студии.

Любой начинающий «сайтостроитель» будет склонен к первому варианту. Но даже при данном выборе нужно будет изучить некоторые теги, относящиеся к HTML и CSS. Допустим, вы скачиваете готовый шаблон, устанавливаете его на хостинг, привязываете домен к хостингу и запускаете проект. Но «по умолчанию» готовая тема будет без вашего контента и изображений. Так как административной панели нет, необходимо открывать код и заменять стандартные иллюстрации на свои, писать свой контент, форматируя его с помощью специальных тегов. Грубо говоря, есть «демо» информация, которую мы заменяем на свою.

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

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

Суть визуальных редакторов заключается в отсутствии работы с кодом. От вас требуется визуальное оформление сайта — под ним подразумевается проставление и форматирование блоков, создание меню и выбор для него области, добавление иллюстраций и контента. Создать «навороченный» лендинг с помощью ПО практически невозможно. Также некоторые программы генерируют не совсем чистый код, что делает их слабее онлайн-конструкторов.

Как создать сайт, если есть шаблон?

1. Есть универсальные шаблоны — они подходят для любого движка. Например, HTML шаблон классического одностраничного формата можно разместить на любом движке. Но если шаблон был написан конкретно для определенной CMS (например, DLE или WordPress), он будет некорректно отображаться на других площадках.

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

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

Рекомендуем ознакомиться со следующими программами, которые упростят редактирование шаблона:

WebSite X5, TemplateToaster, Artisteer — программы для редактирования загруженных тем, создания структуры для шаблонов. Также можно сделать шаблон с нуля.

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

Как сделать шаблон для сайта самому?

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

JavaScript/Jquery — язык программирования, задействованный на большинстве современных сайтов. Если не вдаваться в терминологию, то с помощью JavaScript можно разработать интерактивные тексты, флеш-игры, «умные» визуальные эффекты, сценарии на клики мышкой. Допустим, если работать только с HTML, то вам не удастся сделать меню из нескольких уровней. Благодаря JavaScript/Jquery, пользователю достаточно навести мышку на пункт в меню, чтобы самостоятельно на экране появились дополнительные пункты. Почему HTML не может поддерживать флеш-сайты, очевидно. HTML не создает динамические сайты, только статистические. На статистических страницах вы разместите максимум иллюстрации, видео и текстовой контент.

PHP — большинство современных движков писались на данном языке. За счет PHP статистический HTML превращается в динамический. Почему сегодня никто самостоятельно не верстает HTML шаблоны? Как раз таки за счет наличия PHP и движков на нем. Вы можете сделать шаблон HTML и посадить страницы на хостинг. Но что дальше? Как публиковать новый контент? Как работать над новыми страницами, их оформлением? Постоянно лезть в код? Но есть ли в этом смысл, когда PHP движки позволяют без единой строчки кода менять все, что только вздумается.

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

1. Кодирование страниц сайта (верстка шаблона) — за основу берется PSD-макет. После верстки мы видим вроде бы готовую страницу, но пока рано говорить о ее полной работоспособности. То есть, внешний вид есть, что-то работает, но современные составляющие в самом шаблоне не реализованы.

2. Далее выбирается движок, куда нужно лить шаблон. Чаще всего, PHP, например WordPress или Joomla. Если этот пункт игнорируется, просто заливаются на хостинг HTML-файлы. Нужна новая страница? Прописывается новый HTML-файл и публикуется. Логично, что делать этого никто не хочет, поэтому акцентировать свое внимание нужно строго на движках.

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

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

Как итог, самостоятельно разрабатывать шаблон новичок может только при необходимости статистического сайта, который сегодня достаточно редко встретишь на просторах интернета. Поскольку при знании одного HTML «далеко не уедешь», а изучать JavaScript в сочетании с PHP — это уже «отдельная история».

Как сделать просто сайт с шаблоном самостоятельно?

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

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

Рекомендуем протестировать конструктор коммерческих сайтов Bloxy.ru. Ключевые преимущества онлайн-конструктора:

  • Пошаговая разработка веб-ресурса с встроенной инструкцией. Разработка подразумевает под собой клики и прописывание информации.
  • Текст и дизайн разделены. То есть, если вы меняете дизайн, контент остается в нужной области, не уплывает и не требует форматирования.
  • Шаблоны, макеты — все готовое. Вносить незначительные доработки возможность есть, но без работы с кодом.
  • Публикация медиа-контента за один клик. Публикация иллюстраций, интеграция видеороликов, создание фото-галерей — подобные процедуры проделываются прямо в браузере.
  • Дизайнерские шаблоны на различные тематики.
  • Редактирование в режиме реального времени. Вы добавили контент или страницу — моментально информация и новая страница стала доступна для посетителей.
  • Надежность — вам не приходится беспокоится ни за бесперебойную работу за своего сайта, ни за данные на нем. Облачные сервисы работают на надежных серверах. За работу ваших сайтов отвечает сам онлайн-конструктор.
  • Временные затраты — около 60 минут на разработку профессионального одностраничного сайта.

land-site.ru

Как создать сайт за 3 часа

 
Моя основная тема — продвижение, а не создание сайтов.

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

И как создать сайт за 3 часа я тоже знаю.

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

Речь идет на создании любого сайта (не обязательно блога) именно на WordPress, т.к. это одна из самых простых и интенсивно развивающихся бесплатных платформ. У меня все мои сайты на нем. Есть у него и плюсы, есть и некоторые минусы, хотя минусы скорее распространяются на масштабирование сайта и зависят от того, насколько грамотно изначально сформировать базу данных сайта. Если вы планируете огромный сайт на Вордпресс — стоит нанять специалиста этого направления.

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

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

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

Указанное время — 3 часа — не включает в себя временные затраты на поиск исполнителя на фрилансе (у меня уже есть такой проверенный специалист), если вы сами не разбираетесь в HTML или там привязке домена, не умеете регистрировать хостинг и т.д.

Я могу за пять минут на уже давно существующих эккаунтах создать домен, при

seoandme.ru

Как просто и быстро сделать сайт самому

Бесплатные конструкторы позволяют создать сайт, адаптированный под требования начинающего веб-мастера. Среди наиболее многофункциональных ресурсов можно отметить Ucoz, Wix, Nethouse, Saitodrom. Каждый из данных сервисов позволяет всего за пару часов создать полноценный проект. Отличительной особенностью конструкторов является возможность выбора уже готовых шаблонов, наличие подробного описания каждой функции панели управления.

Чтобы создать сайт с использованием выбранного сервиса, перейдите на его главную страницу. Нажмите на кнопку «Регистрация». Некоторые сайты позволяют создать учетную запись даже без указания дополнительной информации – на ресурсах реализована система автоматической регистрации при помощи аккаунтов в социальных сетях. После заполнения всей требуемой информации вашему сайту будет присвоен интернет-адрес и вы сможете перейти в панель управления. Конструкторы имеют интуитивно понятный интерфейс, достаточное количество документации и примечаний, чтобы уже через некоторое время после знакомства с системой веб-мастер смог приступить к созданию достаточно качественного проекта.

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

Среди наиболее известных и удобных программ для создания интернет-ресурсов можно отметить WebSite X5, отличительной особенностью которой является поддержка большого количества шаблонов и создания сложных интерфейсов (например, интернет-магазинов). Другой популярной среди пользователей программой является SiteEdit. Среди бесплатных визуальных редакторов можно отметить «Мини-Сайт» и WebProject.

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

www.kakprosto.ru

Создаем простой сайт. Часть 1. Первая html страничка ‹ Asterial Web. IT блог

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

Как ни удивительно, но для того, чтобы научиться делать простые html странички не нужно ни хостинга, ни каких-либо специальных программ. Все, что нам потребуется — это программа для редактирования текста, например, самый обычный блокнот. Но, стоит заметить, удобнее использовать специальный блокнотс подсветкой синтаксиса: Notepad++ или Sublime Text. Если вы хотите заниматься созданием сайтов и в будущем, то советую использовать Sublime Text, который я всегда использую для редактирования  и создания сайтов. Просматривать html страничку можно в любом интернет браузере, просто открыв ее двойным щелчком.

Перейдем непосредственно к созданию страницы. Создаем новую папку, назовем ее Test. В этой папке будут лежать файлы сайта. Теперь в папке test создайте файл с названием index.html. Этот файл будет содержать html теги, описывающие основную структуру сайта. Именно его мы будем потом открывать в браузере, чтобы посмотреть получившуюся html страницу. Открываем файл index.html в текстовом редакторе, в данной статье будем работать только с этим файлом. Обратите внимание на кодировку файла, желательно, чтобы была кодировка UTF-8, иначе могут быть проблемы с отображением русских букв.

Первое, что мы сделаем — укажем тип документа с помощью тега <!DOCTYPE>, в нашем случае используется html5, так что достаточно написать <!DOCTYPE html>. Подробнее о типах html-документов читайте в статье Информация о DOCTYPE в Html5 и xhtml. Далее обязательно идет открывающий тег <html>, который укажет компьютеру, что теперь ему придется иметь дело с html кодом. Закрывающий тег </html> будет в самом конце, указывая, что html код завершен. Следующий тег — <head></head>, в котором в нашем случае будет указано название страницы, отображаемое в заголовке браузера, а в прочих случаях также указываются мета-описание, ключевые слова, пути к скриптам, css, лентам новостей и т.д. Чтобы было понятно скажу сразу - внутри тега <head> подключаются файлы и скрипты, необходимые для работы сайта, а не выводится шапка, как могло бы показаться на первый взгляд.  Как говорилось выше, внутри тега <head> напишем заголовок страницы <title>Заголовок страницы</title>. Заголовок пишется внутри тега <title>. Остановимся отдохнуть и посмотрим, что получилось на данный момент:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
</body>
</html>

Тег <body> - это тело сайта, именно в нем отображаются все видимые элементы, такие как шапка, контент, футер и многое другое. Приступим к разметке сайта: теперь будем использовать теги <div>, которые позволяют выделять блоки и разделы в структуре html страницы. Оперируя тегами <div>, можно присваивать им имена - айди, которые позволят лучше ориентироваться в структуре страницы, а также использовать каскадные таблицы стилей в будущем. Айди тегу div присваивается следующим синтаксисом: <div>, а закрывается тег вот так - </div>

У нашей страницы будет простейшая структура — шапка, блок контента и футер. В шапке обычно размещают информацию о сайте, например, его название, логотип, адрес фирмы и т. д., в контенте выводится различная информация, а футер — это нижняя часть сайта, в нем может быть как просто картинка или текущая дата, так и какая-либо другая более сложная информация. Вышесказанное будет проще понять на наглядном примере — добавляем новые теги <div> в файл index.html:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<div>Шапка сайта. Добро пожаловать на мой сайт</div>
<div>Контент. Здесь может быть абсолютно любая информация.</div>
<div>Футер. Подвал. Нижняя часть сайта</div>
</body>
</html>

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

Перейти ко второй части - Создаем простой сайт. Часть 2. Простое оформление

Третья часть урока - Перейти

Возможно, вам также будут интересны статьи:

asterial.ru

Как самому сделать простой сайт

Если вам непременно нужен сайт, пусть даже простенький такой, без наворотов, но в сайтостроении вы мало что смыслите, то перед вами, само собой, встает вопрос: как самому сделать простой сайт?

Конечно, зачем нанимать кого-то, если вы и сами без проблем можете построить незатейливый сайтик.

Как самому сделать простой сайт

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

Сайт, как известно, состоит из web-страниц, которые создаются на языке HTML (язык разметки гипертекста). В этой статье перечислены основные теги HTML и описано, как, когда и для чего их использовать.

Сначала пару слов о структуре HTML-документа. Все web-страницы имеют следующий вид:

<html>
<head></head>
<body></body>
</html>

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

Тег <html></html> показывает, что внутри – HTML-документ.

<head></head> — заголовок (содержится служебная информация)
<body></body> — тело (содержательная часть документа)

В части служебной информации тегом <title></title> задается название страницы, которое отображается в браузере.

Теперь перейдем к наполнению нашей странички (тела) текстом. Обычный текст заключен в теге <p></p>, а заголовки (текст большого размера) – в теге <h2></h2>. Также мы можем как-нибудь «украсить» наш текст, поместив его в тег:

<i></i> — для курсива
<b></b> — для жирности

<left></left>, <center></center>, <right></right> -для выравнивания по левому краю, по центру и по правому соответственно

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

<img src=»адрес_картинки.jpg» />

Адрес картинки может быть как локальным, так и ссылкой.

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

<a HREF=»адрес_страницы_на_которую_нужно_перейти.html»>Сам текст</a>

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

Удачи!

blogohelp.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о