Для того, чтобы создать свой первый сайт, или простую HTML страничку, нужно освоить несколько обязательных пунктов, которые будут описаны в данной статье. А главное — нужно понимать, что сайт за пять минут не делается. Естественно, все видят много рекламных материалов, которые обещают чудесный веб-сайт своими руками за несколько мгновений, например скачай шаблон и загрузи на хостинг… Но все это не совсем правда. Можно со мной не согласиться, но я начинал с ноля и знаю о чем пишу. Для начала, как минимум нужно ознакомиться с языком HTML, без которого не возможно написать страницу и разобраться со , типа где колесо а где руль. Для примера, нужно перечитать все страницы данного сайта, чтобы создать приличный сайт и раскрутить … И когда появиться общее представление, тогда и двери начнут открываться. А начинать нужно — значит начнем создавать свою первую веб-страничку и удачи нам!
Основные HTML теги для написания сайта.Для начала нужно ознакомиться с основными тегами, которые применяются при создании любого веб-сайта. Подробнее они описаны в разделе этого сайта и этих знаний будет вполне достаточно для начала, а ниже общий осмотр, тегов. Их нужно уметь видеть и понимать предназначение, тогда не будет проблем с изменениями и дополнениями на странице.
— этот тег стоит в самом начале любой страницы, и обьявляет кодировки и саму страницу.
— этим тегом обязательно заканчиваются все страницы, точнее обьявляют конец страницы.
— между этими тегами находится невидимая часть сайта, документация.
— между этими тегами пишется название вашего сайта.
— между этими тегами пишется ввесь контент сайта — наполнение страницы.
|
— это таблица, одна из самых важных конструкций при построении сайта. … — теги для написания заголовков, параграфов, списков для вставки текста на страницу. — блочный элемент, на котором можно построить весь сайт, изучить нужно обязательно. Страница 1 — так делается ссылка на страницу. Инструменты для верстки веб-сайта. Для верстки сайта нужен редактор, в котором можно его верстать. Лучше всего для этой цели подойдет програма Adobe_Dreamweaver_CS3_v9_RUS, , которую можно скачать в сети и установить на свой компьютер. С ее помощью открываются все файлы для редактирования. В дальнейшем, нужно будет установит на свой комп . Это прога, полный симулятор обычного сервера, в котором ведется создание, редактирование и просмотр сложных веб-проектов, написанных на языках PHP и с хранением информации в базах данных MSQL. Но к этому еще далеко и возможно многим не понадобиться. Естественно, нужно видеть страницу которую создаем. Для этого подойдет любой браузер. И если Вы уже читаете данную статью, значит Вы в сети и браузер на вашем компе уже установлен. А открыть файл для просмотра можно дважды кликнув по файлу страницы, или выбрать пункт меню — открыть с помощью , и выбрать свой браузер. А для того, чтобы страница была красивой, нужно . Но сначала нужно его отредактировать в каком то редакторе. Лучше всего это делать в проге — Adobe Photoshop , которую также нужно изучить. Из каких частей состоит страница сайта?Для начала создадим простую HTML страницу и назовем ее — index.html . Она будет главной и название должно быть только таким, все остальные страницы можно называть как угодно, но обязательно с расширением _ _.html и обычно создают папку для хранения изображений. Должно получиться вот так — Состоит страница минимум из трех частей:
обязательная часть Возможно я повторюсь, но чтобы убедится что все работает и сделать это своими руками, сделайте следующее: На пустой странице щелкните правой кнопкой мышки, выбираете меню «Создать
» — «Текстовый документ
«, дальше меняете название файла на А построение более сложного проекта, созданного без использования таблиц, можно изучить на следующей странице, где описано И используйте один из редакторов. Основные теги Текст Ссылки Фреймы Таблицы Списки Формы Изображения Пример 1. Структура документа HTML
Здравствуй, мир! Пример 2. Структура простейших веб-страниц
5. Пример 3. Разметка веб-страницы
Слушайте Эхо Москвы! Пример 4. Простой пример на HTML
Упорядоченный нумерованный список
Этот текст написан полужирным шрифтом. Этот текст логически выделен тегом strong (может отображаться как обычный текст в некоторых браузерах или отображаться полужирным шрифтом). В некоторых браузерах действие аналогично действию тега b. Этот текст отображается более крупным шрифтом (может отображаться обычным шрифтом в некоторых браузерах) Этот текст логически выделен тегом em. В некоторых браузерах действие аналогично действию тега i. Этот текст отображается курсивом. Этот текст отображается более маленьким шрифтом. Этот текст ниже , а этот выше уровня основного текста.
Тег pre хорошо использовать для отображения компьютерного кода.: For i = 1 to 10 print i next i Тег code предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера code как моноширинный текст уменьшенного размера. Тег kbd используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере kbd моноширинным шрифтом. Текст, отмеченный тегом tt отображаетя моноширинным текстом. Этот тег относится к группе тегов физического форматирования. Тег samp используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере samp с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление. Тег var используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере var курсивным начертанием. Дональд Дак почтовый ящик 555 Диснейленд США UN WWW Атрибут title используется для отображения текста, содержащегося в нем, при наведении курсора мыши на акроним или аббревиатуру. Блок цитаты: Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. Браузер вставляет пустую строчку и отступы перед и после блока цитаты. Короткая цитата: Это короткая цитата Элемент q никак не выделяется и отображается как обычный текст. Дюжина - это Большая часть браузеров перечеркивают удаленный текст и подчеркивают вставленный текст. Старые браузеры могут отображать удаленный текст как простой текст. UN Это параграф. Это другой параграф. Форматированиеhtml y=x2-уравнениепараболы. H2O-формулаводы. Форматированиеhtml Это заголовок первого уровня Это заголовок второго уровня Это заголовок третьего уровня Это заголовок четвертого уровня Это заголовок пятого уровня Это заголовок шестого уровня Это просто текст
К примерам html Если вы укажете атрибуту target значение “_blank”, ссылка откроется в новом окне браузера. Это ссылка на отправку почты:
Внимание: Пробелы между словами должны быть заменены знаком «%20» , чтобы вы были уверены, что браузер будет правильно отображать ваш текст.
Некоторые старые браузеры не поддерживают строчные фреймы. В этом случае строчный фрейм не будет отображен в окне браузера.
Каждая таблица начинается с тега table. Таблица из одной колонки:
Одна строчка из трех колонок:
Две строчки по три колонки:
Таблица с обычной рамкой:
С широкой рамкой:
С очень широкой рамкой:
Заголовки таблицы:
Вертикальные заголовки:
Эта таблица с широкой рамкой и названием
Ячейки состоит из двух колонок:
Ячейка состоит из двух строк:
Упорядоченный список: Значки списка в виде закрашенного круга:
Значки списка в виде незакрашенного кругаCircle bullets list:
Значки списка в виде закрашенного квадрата:
Нумерованный список: Нумерация заглавными буквами: Нумерация строчными буквами: Нумерация заглавными римскими цифрами: Нумерация строчными римскими цифрами: Вложенный список:
Помните, что когда вы вводите пароль, браузер показывает звездочки вместо символов. Мужчина: Женщина: Пользователь может выбрать только одно значение. Вольво Сааб Фиат Ауди У меня есть мотоцикл: У меня есть машина: У меня есть аэроплан: Если вы нажмете на кпопку «Подвердить», вы отправите ваши данные на новую страницу, которая называется html1.asp.
Вставка простого изображения: Двигающееся изображение (анимация): Помните, что синтаксис вставки анимации ничем не отличается от синтаксиса вставки простого изображения. Взгляните, мы вставили изображение, как фон! Можно вставлять изображения форматов gif, jpg/jpeg и png. Если размеры изображения меньше страницы, оно будет повторяться пока не заполнит весь фон.
Вы можете изменять размер изображения, меняя значения атрибутов «height» (ширина) и «width» (высота) тега img. 9 голосов Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.
В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше. Как создать страничкуПервую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.
Откройте документ.
Вставьте в него вот этот код.
Моя первая страница
Создать страницу проще, чем вы думаете
Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате.
Файл нужно назвать index.html . Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.
Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.
Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.
Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center » и вставим строчку, в которой содержится слово «Color ». Кстати, я уже писал. Это очень просто, рекомендую к прочтению. Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5 Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: .
Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста. Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на , который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение. Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи. ТегиС вашего позволения я перейду в программу NotePad++. Она обладает целым рядом преимуществ в сравнении с обычным блокнотом. Сейчас мне очень пригодится подсветка тегов, чтобы показывать вам те элементы, о которых я буду рассказывать. Вообще, если вы собираетесь, изучать html, то я очень рекомендую установить эту бесплатную программу. Она не единственная и я могу предложить вам еще несколько если кого-то заинтересуют альтернативы. Мы же перейдем к теоретической части. ОсновныеНачинается и заканчивается страница с тегов . Они показывают браузеру, что это веб-документ, созданный при помощи html.
Далее идет или заголовок. В ней располагается самая важная информация о странице, в нашем случае – . Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.
Именно теги отвечают за начало и конец основной информации о страничке.
Тег указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style , как мы это делали в примере. Хотя об этом тоже рановато.
Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к . Помимо h1, существуют еще и h2, h3,h4. В этой же строчке есть открывающийся и закрывающийся . Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.
Далее идет тег img , то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты. Первым делом идет alt , то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title . При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.
Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку. В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.
отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.
помогает выделить текст жирным.
рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере. Ссылкиуказывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес” . В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег .
После того как основная часть страницы написана, вы закрываете тег body , так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html . Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html ». Всего 33 урока помогут вам выйти на новый уровень.
Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup
Помимо этого заберите Бесплатную книгу по созданию сайтов ! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.
Сегодня вы сделали много, ведь первый шаг самый сложный. Подписывайтесь на рассылку и группу ВКонтакте , и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое. До новых встреч и удачи! Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 1 показан код простого документа, содержащего основные элементы. Пример 1. Исходный код веб-страницы Пример веб-страницы Заголовок Первый абзац. Второй абзац. Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1. Рис. 1. Результат примера в браузере
Элемент (жарг. доктайп) предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях - современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать . Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп. Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре. Открывающий тег определяет начало HTML-документа, внутри него хранится «голова» ( ) и «тело» документа ( ). Содержимое этого раздела не показывается напрямую на странице, за исключением элемента . Внутри могут располагаться следующие элементы: , , , , или .
Элемент является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка. Пример веб-страницы Элемент определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).
Рис. 2. Название веб-страниц в браузере Элемент является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в быть не должно. Но допустимо добавлять разные текстовые символы, например, так: Adobe™ Photoshop® . Закрывающий тег показывает, что «голова» документа завершена. «Тело» документа предназначено для размещения элементов и содержимого веб-страницы. Заголовок HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность раздела, расположенного после заголовка. Так, элемент представляет собой наиболее важный заголовок первого уровня, а элемент служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы ... относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него браузер добавляет пустое пространство.
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он всё равно будет передаваться в документе, так что, посмотрев его исходный код, можно обнаружить скрытые заметки. Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но используя полученные знания в предыдущих уроках. В этом уроке курса MM часть 1 мы сделаем 2-страничный сайт...например, о заработке в интернете. Сначала определимся, как это будет приблизительно выглядеть. Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое) сайта. Идея понятна? Приступаем. Запускаем Блокнот и пишем наш минимальный набор для создания страницы .
Теперь напишем между тегами название нашей страницы, например, вот так
Далее разместим теги и , чтобы все содержимое
нашего сайта было размещено по центру страницы.
Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую, чем мы проходили в HTML-уроке о таблицах . Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица: В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы. Для того чтобы сделать такую таблицу, напишите вот такой код
| |||||||||||||||||||||||||||||||||||||||||||||
Т.е. код нашей страницы будет вот такой:
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете
Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов
Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 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.
УЖЕ СЕГОДНЯ вы сможете сделать СВОЙ приличный, эксклюзивный дизайн для вашего сайта , не теряя недели/месяцы на изучение учебников и прочих материалов, не воруя дизайн у других и не используя темплейты. ДАЖЕ ЕСЛИ ВЫ В ПРИНЦИПЕ НЕ ДИЗАЙНЕР - У ВАС ВСЕ РАВНО ПОЛУЧИТСЯ ПРИЛИЧНЫЙ ДИЗАЙН! Как сделать красивый сайт, даже если вы пока не дизайнер. Обучение необходимым навыкам и приемам для создания графических элементов
сайта. Разновидности дизайна. |
К сожалению, книга 2 не бесплатная, но я уверен, что вы не пожалеете о ее покупке. Наверняка до прочтения книги MM-1 вы и представить не могли, что, изучив ее, вы научитесь создавать простенькие сайты. Скорей всего, вам это казалось чем то очень сложным, "не для вашего ума". Но я вас провел по самой короткой дорожке к результату, держа вас как ребенка за руку. Точно так же, изучив MM-2, вы научитесь делать графический дизайн сайта, при этом, опять же пройдя по самой короткой дорожке, т.е. СЭКОНОМИВ ВРЕМЯ, не тратя месяцы на изучение различных книг. Потратив несколько вечеров на изучение MM-2, вы будете в силах делать свой дизайн для своих сайтов, значительно обогнав тех, кто решит купить книги в обычном магазине и будет месяцами их изучать.
Цена на книгу MM-2 также включает в себя цену на консультации. Да.
Каждый покупатель получает право на консультации
в соответствующих закрытых
разделах форума. Наверняка у вас будут появляться вопросы, а спросить некого.
Покупая книгу - вы всегда будете иметь возможность задать вопросы и получить
на них ответы от меня или от опытных учеников! При таком подходе ваше обучение
будет максимально эффективным! При таком подходе вы максимально быстро научитесь
делать сайты и зарабатывать с их помощью.
Если у вас совсем уж туго с финансами, то можете заработать необходимые деньги . Много там не платят, но для кого-то это будет спасительной соломинкой, чтобы купить книги.