Carder
Professional
- Messages
- 2,619
- Reaction score
- 1,871
- Points
- 113
Вы пробовали создать свою собственную веб-страницу?
Вы когда-нибудь задумывались, как работает веб-страница? Вы когда-нибудь хотели создать свою собственную веб-страницу с заголовками, текстовыми и графическими значками? Вы когда-нибудь слышали слово «HTML» и задавались вопросом, что оно означает? Если да, то читайте дальше.
В этой статье мы рассмотрим искусство и науку веб-страниц и поэкспериментируем с рядом методов, которые вы можете опробовать на своей машине сегодня. Мы даже создали инструмент, который позволяет вам опробовать HTML и мгновенно его просматривать. Как оказалось, создание веб-страниц невероятно просто, доставляет массу удовольствия и полностью в пределах вашей досягаемости. Когда вы дочитаете эту статью, вы будете готовы приступить к сборке своей собственной!
Подготовка сцены
На данный момент почти гарантировано, что:- Вы сидите за компьютером.
- Вы используете веб-браузер для чтения этой страницы, и этим браузером может быть Microsoft Internet Explorer, Firefox или, возможно, Netscape.
- Вы хотите узнать, как работают веб-страницы, и, возможно, научиться создавать свои собственные страницы.
Чтобы поговорить о веб-страницах и о том, как они работают, вам нужно понять четыре простых термина (и если некоторые из них звучат как техническая чушь при первом чтении, не волнуйтесь):
- Веб-страница. Веб-страница - это простой текстовый файл, содержащий не только текст, но и набор HTML-тегов , описывающих, как текст должен быть отформатирован, когда браузер отображает его на экране. Теги - это простые инструкции, которые сообщают веб-браузеру, как должна выглядеть страница при отображении. Теги сообщают браузеру, что нужно делать такие действия, как изменение размера или цвета шрифта или расположение элементов в столбцах. Веб-браузер интерпретирует эти теги, чтобы решить, как отформатировать текст на экране.
- HTML - HTML означает язык гипертекстовой разметки . «Язык разметки» - это компьютерный язык, который описывает, как должна быть отформатирована страница. Если все, что вам нужно, это отобразить длинную строку черно-белого текста без форматирования, тогда вам не нужен HTML. Но если вы хотите изменить шрифты, добавить цвета, создать заголовки и встроить графику на свою страницу, HTML - это язык, который вы используете для этого.
- Веб-браузер. Веб-браузер, такой как Netscape Navigator или Microsoft Internet Explorer, представляет собой компьютерную программу (также известную как программное приложение или просто приложение ), которая выполняет две функции: Веб-браузер знает, как перейти к веб-серверу на Интернет и запросить страницу, чтобы браузер мог перетащить страницу через сеть на ваш компьютер. Веб-браузер знает, как интерпретировать набор HTML-тегов на странице, чтобы отображать страницу на вашем экране так, как задумал создатель страницы для просмотра.
- Веб-сервер. Веб-сервер - это часть компьютерного программного обеспечения, которое может отвечать на запрос браузера о странице и доставлять эту страницу в веб-браузер через Интернет. Вы можете думать о веб-сервере как о жилом комплексе, в каждой квартире которого размещена чья-то веб-страница. Для того, чтобы ваша страница могла храниться в комплексе, вам необходимо оплатить аренду помещения. Страницы, которые находятся в этом комплексе, могут быть показаны и просмотрены кем угодно во всем мире. Арендодатель называется принимающей стороной , а арендная плата обычно называется оплатой за хостинг . Каждый день миллионы веб-серверов доставляют страницы в браузеры десятков миллионов людей через сеть, которую мы называем Интернетом. Прочтите, как работают веб-серверы для получения подробной информации об этом процессе.
Просмотр источника страницы
Давайте посмотрим на «внутренности» веб-страницы. Это исходный текст и теги HTML, набранные автором и интерпретируемые браузером для создания веб-страницы, которую вы действительно ВИДЕТЕ в Интернете. Щелкните правой кнопкой мыши любую пустую часть этой страницы и выберите «Просмотреть источник». Появится новое окно, в котором будут отображаться слова и символы, некоторые из которых могут показаться довольно техническими и чужеродными. Эти слова и символы вместе представляют собой программный код HTML, который вы собираетесь изучить. Каждый элемент в этом коде известен как HTML-тег. Не пугайтесь того, насколько это сложно - вы удивитесь, насколько это просто. Когда вы закончите просматривать исходный код страницы, просто закройте исходную страницу, чтобы вернуться к этой статье.Таким образом можно заглянуть «за кулисы» практически любой страницы в Интернете. Когда вы станете более вовлеченными в веб-дизайн, вы, вероятно, обнаружите, что просматриваете источники сложных веб-страниц, чтобы узнать коды, которые авторы или дизайнеры страниц использовали для создания таких интересных схем.
Теперь давайте узнаем, что означают многие теги, и приступим к созданию простой страницы.
HTML-тег
HTML тег является элементом кода, который сообщает веб - браузер, что делать с текстом. Каждый тег будет отображаться в виде букв или слов между < (знак меньше) и > (знак больше).Пример: <center> <body>
Чтобы указать веб-браузеру «закончить» выполнение того, что вы ему только что сказали, в закрывающем теге используется косая черта:
Пример: </center> </body>
Большинство тегов состоит из совпадающих пар «начало» и «конец», но это не абсолютное правило.
Любая создаваемая вами веб-страница будет содержать следующие теги в начале страницы:
- <HTML>: сообщает веб-браузеру, что это начало HTML-документа.
- <HEAD>: сообщает этому веб-браузеру, что это заголовок страницы (позже вы узнаете, что находится между тегами «HEAD»).
- <TITLE>: сообщает веб-браузеру, что это заголовок страницы.
- <BODY>: сообщает веб-браузеру, что это начало содержимого веб-страницы - все, что вы хотите сказать и увидеть на своей странице, будет следовать этому тегу.
- </BODY>
- </HTML>
Создание простой веб-страницы
Есть много способов создавать веб-страницы. Сотни компаний создали инструменты, которые так или иначе помогают в этом процессе. Однако наша цель здесь - понять, как на самом деле работают веб-страницы, а не иметь инструмент, скрывающий от нас этот процесс. Поэтому мы будем использовать самые простые инструменты - те, что уже есть на вашем станке.
На вашем компьютере есть программа или приложение, которое может создавать простые текстовые файлы. На компьютерах с Windows это приложение называется Блокнот . На Macintosh эта программа называется SimpleText. Если вы не можете найти эти программы, можно также использовать простую программу обработки текста, например WordPerfect или Microsoft Word.
Примечание:
- В среде Windows 95/98 нажмите кнопку «Пуск», выберите «Программы», «Стандартные» и нажмите «Блокнот».
- В среде Windows 3.1 щелкните Стандартные (в Диспетчере программ) и щелкните Блокнот.
- В среде Macintosh щелкните Macintosh HD, щелкните Приложения и щелкните SimpleText.
Code:
<html>
<head>
<title> Моя первая страница </title>
</head>
<body>
Привет. Это моя первая страничка!
</body>
</html>Независимо от того, размещаете ли вы теги и текст рядом, построчно или с отступом, это не повлияет на то, как текст будет отображаться в окне браузера. Неважно, используете ли вы в тегах прописные или строчные буквы.
Теперь вам нужно где-то сохранить этот файл, чтобы вы могли найти его через мгновение. Сохраните его на рабочий стол или, еще лучше, в каталог, который вы настроили для хранения всех страниц, которые вы собираетесь создать. Сохраните его с именем файла first.html.
Затем откройте страницу в своем веб-браузере (например, Microsoft Internet Explorer или Netscape Navigator). Все веб-браузеры имеют возможность открывать файл, хранящийся на локальном компьютере. В Internet Explorer и Netscape выберите «Открыть файл» в меню «Файл» в верхней части окна. Откройте файл first.html. Когда вы откроете его в браузере, он будет выглядеть примерно так, как на изображении выше.
На этом рисунке обозначены три вещи:
- Вы можете видеть, что страница называется «Моя первая страница».
- Вы можете видеть, что в теле страницы есть слова «Здравствуйте. Это моя первая страница!»
- Вы можете видеть, что URL-адрес, отображаемый в адресном окне, - это C: WINDOWSDESKTOPfirst.html с локального жесткого диска, а не обычный https: // ..., который URL-адрес содержал бы, если бы мы получали страницу с сервера на интернет.
Теперь, когда вы создали и просмотрели свою первую веб-страницу, вы на пути к тому, чтобы стать профессионалом веб-страниц. Ключ к знанию всего о том, как работает веб-страница, - это узнавать все больше и больше тегов HTML, которые позволяют настраивать ваши страницы. Вы также захотите узнать об инструментах, которые помогут вам создавать таблицы, фреймы и графику для ваших страниц. Эта серия веб-страниц проведет вас через всю необходимую информацию.
Базовая HTML-форма
Вы будете использовать основные HTML-теги на этой странице все время - они выполняют 90% всего форматирования, которое вы видите на большинстве веб-страниц. Как только вы их изучите, вы станете профессионалом в области HTML!- Если вам понравился файл «first.htm», который мы обсуждали на предыдущей странице, вы можете ввести в него HTML и создать полные веб-страницы. Не забудьте поместить всю информацию, которую вы хотите отображать на своей веб-странице, между тегами и. Поэкспериментируйте со своей страницей, добавляя новые теги и проверяя результаты.
Жирный, курсив и подчеркивание
Выделите любой фрагмент текста полужирным шрифтом, добавив тег: <b> в начало текста и добавив закрывающий тег: </b> в любом месте, где вы хотите, чтобы атрибут жирным шрифтом заканчивался.Это <b> жирный шрифт </b>. Это смело .
Чтобы выделить курсивом, используйте эти теги таким же образом:
< i> ... </i> Это <i> курсив </i>. Это выделено курсивом.Чтобы подчеркнуть, используйте эти теги:
<u> ... </u> Это <u> подчеркнуто </u>Разрывы и абзацы
Хотя ваш набранный текст может содержать символы возврата каретки, табуляции и лишние пробелы, браузеры их не увидят. Вам нужно будет использовать теги, чтобы создать пустое место в ваших HTML-документах.<br> создает разрыв между одной строкой и другой. Вы можете использовать несколько из этих тегов вместе, чтобы создать пустое пространство.
<p> создает дополнительное пространство между двумя строками текста. Если вы поместите строку текста, это только разорвет строку; если вы используете <p>, он разорвет строку и создаст дополнительный пробел.
<hr> создает горизонтальную линейку или горизонтальную линию.
Вкладки
Формального HTML-тега для создания «вкладки» в документе не существует. Многие веб-дизайнеры создают таблицы или используют пустые изображения для создания пространства (таблицы и изображения описаны далее в этой статье). Один из способов сделать текст отступом - использовать тег <ul>, чтобы заставить браузер думать, что вы собираетесь создать «список». В списке автоматически выполняется отступ текста. Закройте </ul>, чтобы «закончить» отступ. Теги <blockquote> ... </blockquote> также будут иметь отступ для текста.Другой альтернативой является тег <pre>. Этот тег используется для отображения предварительно отформатированного текста - текст отображается как есть. Любой текст между тегами <pre> и </pre> будет отображаться в браузере так же, как и в исходном коде.
Цвет и размер шрифта
ЦветИзмените цвет любого текста с помощью тегов:
<font color = "color"> ... </font>
Это <font color = "blue"> синий </font>.
Это <font color = "green"> зеленый цвет </font>.
Подойдут самые стандартные цвета. Также попробуйте «светлые» и «темные», такие как «светло-голубой» или «темно-зеленый». Вы также можете указать конкретный шестнадцатеричный номер цвета, например: <font color = "# 864086">. Список шестнадцатеричных цветовых кодов см. На сайте December.com: HTML.
Если вы хотите назначить определенный цвет всему тексту своей страницы, добавьте в тег text = "color".
Пример: <body text = "blue">
Даже если вы назначите цвет всему тексту, вы все равно можете изменить цвет любой части этого текста, используя теги, которые вы узнали выше.
Тип шрифта
Измените тип шрифта любого текста с помощью тегов: <font face = "font type"> ... </font>Это <font face = "arial"> arial </font>.
Это <font face = "geneva"> Женева </font>.
(Примечание: если указанный вами тип шрифта недоступен на компьютере пользователя, по умолчанию будет выбран тип шрифта по умолчанию браузера, обычно Courier или Times New Roman; поэтому лучше придерживаться стандартных типов шрифтов, если вы хотите иметь возможность для управления тем, что отображается в браузере пользователя.)
Размер
Измените размер любого текста с помощью тегов:<font size = value> ... </font>
Пример: <font size = 4>
Размер шрифта по умолчанию в большинстве браузеров равен «3», поэтому любые значения больше 3 сделают текст больше, а любые значения меньше 3 сделают его меньше.
Вы также можете изменить размер шрифта, добавив или вычтя размер шрифта по умолчанию.
Пример: <font size = + 4> или <font size = -2>
Этот шрифт <font size = + 2> увеличен на 2 </font>
Этот шрифт <font size = + 1> увеличен на 1 </font>
Этот шрифт <font size = -2> уменьшен на 2 </font>
Этот шрифт <font size = -1> уменьшен на 1 </font>
Вы также можете изменить размер шрифта с помощью тегов <small> и <big>:
Это <small> маленький </small> текст.
Это <big> большой </big> текст.
Заголовки
Теги заголовков также изменяют размер шрифта, создавая жирный «заголовок» для абзаца или статьи:<h1> Это заголовок H1. </h1>
<h2> Это заголовок H2. </h2>
<h3> Это заголовок H3. </h3>
Завершите любое изменение элемента шрифта тегом:
</font>
Или, используя координирующую конечную пару для конкретного тега, который вы использовали:
Пример: </small>, </big>, </H2>
В следующем разделе мы узнаем, как добавить цвет фона.
Добавление цвета фона
Изменение цвета фона вашей страницы, добавив BGCOLOR = «цвет» в теге.Пример: <body bgcolor = "yellow">
Опять же, как было описано в разделе об изменении цвета шрифта, вы можете использовать большинство стандартных цветов или использовать шестнадцатеричный цветовой код.
Создание списков
Вы можете создавать списки трех типов: неупорядоченные, упорядоченные и описательные.Неупорядоченный список
Неупорядоченный список выглядит так:- Калифорния
- Орегон
- Северная Каролина
Пример:
<ul>
<li> Калифорния
<li> Орегон
<li> Северная Каролина
</ul>
Тип маркера можно изменить на «круг», «квадрат» или «диск», добавив спецификацию в тег <ul>:
<ul type = "circle">
<li> Калифорния
<li> Орегон
<li> Северная Каролина
</ul>
<ul type = "square">
<li> Калифорния
<li> Орегон
<li> Северная Каролина
</ul>
Упорядоченный список
Упорядоченный список выглядит так:- апельсины
- виноград
- вишня
Пример:
<ol>
<li> апельсины
<li> виноград
<li> вишня
</ol>
Вы можете изменить тип организации, добавив обозначение типа в тег <ol>.
<ol type = "A"> упорядочивает список заглавными буквами: (A, B, C ...)
<ol type = "a"> упорядочивает список по строчным буквам: (a, b, c ...)
<ol type = "I"> упорядочивает список: (I, II, III ...)
<ol type = "i"> упорядочивает список маленькими римскими цифрами: (i, ii, iii ...)
Если вы хотите начать свой упорядоченный список с указанного значения, такого как «6», используйте следующие теги «начало» и «значение»:
<ol start = 5>
<li value = 6>
Описательные списки
Описательный список создает список текстовых элементов со второй строкой с отступом:Кардер
Основатель Carder.uk
Таким образом используйте следующие теги:
<dl>
<dt> Кардер
<dd> Основатель Carder.uk
</dl>
Тег <dt> должен соответствовать тексту, который вы хотите выровнять на полях; <dd> соответствует строке, в которой вы хотите сделать отступ.
В следующем разделе мы узнаем, как делать ссылки на другие сайты.
Ссылки на другие сайты
Одна из лучших особенностей веб-страниц - это возможность создавать ссылки на другие страницы в Интернете. Используя следующие теги привязки , вы можете ссылаться на работы других людей, указывать на другие страницы, которые вам нравятся, и т.д.<a href="URL">
Введите заголовок страницы после тега привязки и закройте привязку с помощью:
</a>
Пример:
<a href="https://www.carder.market"> Форум кардеров </a>
Вот как это будет выглядеть на вашей странице:
Форум кардеров
Вы также можете легко комбинировать маркированные списки со ссылками для создания списка ссылок.
Новые окна
Если вы не хотите, чтобы посетители уходили с вашей страницы, когда они нажимают на одну из ваших ссылок на другой сайт, добавьте этот тег в свой тег привязки. Когда по ссылке щелкают, вместо того, чтобы уводить пользователя с вашего сайта на чужой, он просто открывает новое пустое окно, в котором отображается место назначения ссылки:target = "_ blank"
Пример:
<a href="https://www.carder.market" target="_blank">
Цвет ссылки
Синий - стандартный цвет по умолчанию для ссылок. Но вы можете изменить цвета связанной информации на своей странице, вставив эти теги в свой тег <body>:- link = "цвет"
- vlink = "цвет"
Пример: <body link = "green" vlink = "green">
Ссылка на получение электронной почты
Если вы хотите получать электронную почту от людей, читающих вашу страницу, используйте следующий тег привязки :<a href="mailto:youremailaddress">
Затем снова введите свой адрес электронной почты (или любой текст ссылки, который вы хотели бы отображать на своей странице) после тега. Закройте строку:
</a>
Пример:
<a href="mailto:example@carder.market"> Напишите мне </a>
Вот как это будет выглядеть на вашей странице:
Напишите мне
Создание ссылок на вашу собственную страницу
Якорные теги используются не только для ссылок на страницы в Интернете. Вы также можете использовать их для ссылки на информацию, расположенную на вашей собственной странице. В этом случае вы можете опустить префикс «https: // www» и просто включить имя файла html-документа:Пример: <a href="company.htm"> Информация о компании </a>
Чтобы создать ссылку на определенную часть вашей страницы, вам нужно будет назвать раздел, на который вы ссылаетесь, и включить это имя в тег привязки ссылки. Вот как:
Назовите любой раздел своей страницы, вставив следующий тег непосредственно перед конкретным разделом, на который должна ссылаться ссылка. Вы можете выбрать любое слово, букву или символ для использования в качестве имени:
<a name="name">
Пример: <a name="5">
В теге привязки вы обращаетесь к этой части своей страницы, помещая "#" перед именем. Если именованная ссылка относится к месту на странице, содержащему ссылку, тег привязки, связывающий эту именованную часть, будет выглядеть следующим образом:
<a href="https://www.carder.market/#5"> Информация о компании </a>
Если указанная ссылка относится к html-документу отдельно от страницы, на которой находится ссылка, также укажите имя файла html-документа.
Пример: <a href="https://www.carder.market/company.htm#5"> Информация о компании </a>
В следующем разделе мы узнаем, как добавлять изображения.
Добавление изображений и графики
Разместите любое цифровое изображение на своей странице, используя следующий тег:<img src = "имя файла изображения.расширение">
Изображения на веб-страницах представляют собой файлы GIF (произносится «jiff») или файлы JPG (произносится «jaypeg»). Любое изображение будет содержать одно из этих расширений, поэтому, если у вас есть изображение с названием «логотип», оно будет иметь пометку «logo.gif» или «logo.jpg».
Обязательно храните изображения и графику, которые вы будете отображать на своей веб-странице, в той же папке или каталоге, где хранится ваш "html" файл. В противном случае вашему компьютеру будет сложно найти изображение, которое вы хотите отобразить. Кроме того, не забудьте ввести имя изображения в том виде , в каком оно сохранено в этой папке - имена файлов чувствительны к регистру.
Обоснование
По умолчанию ваш текст и изображения выравниваются по левому краю при отображении в вашем браузере, что означает, что текст и графика автоматически выравниваются по левому полю. Если вместо этого вы хотите «центрировать» любую часть страницы, вы можете использовать следующий тег:<центр>
Завершить центрирование можно соответствующей закрывающей меткой:
</center>
Вы также можете закодировать «деления», что угодно, от слова до строки текста и всей страницы, чтобы они были выровнены определенным образом.
Начните свое разделение с тега выравнивания разделения, включая выравнивание, которое вы хотите, чтобы текст или изображения принимали (т.е. вправо, влево, по центру):
Пример: <div align = "center">
Завершите выравнивание выравнивания разделения тегом:
</div>
Обладая информацией, которую вы только что узнали из этой статьи, вы можете начать создавать очень интересные и привлекательные веб-страницы. Попробуйте создать одну или две веб-страницы, используя инструменты и теги, которые мы только что обсудили. Если вы хотите, чтобы мир увидел ваш шедевр, перейдите к статье «Как сделать вашу страницу в Интернете», чтобы узнать, как опубликовать свою новую веб-страницу.
Создание таблиц
В настоящее время одним из наиболее широко используемых инструментов HTML для создания искусно организованных веб-страниц является таблица . Осваивая таблицы, вы больше не просто «создаете» страницу, вы ее «проектируете».Разнообразие столов в вашем распоряжении обширно: от простой коробки до очень сложных дизайнерских макетов. В этой статье мы обсудим основы работы с таблицами, а также несколько приемов и советов, с которыми вы можете поэкспериментировать в своем стремлении создать захватывающую страницу, которую люди будут любить посещать.
Опять же, как и вся информация, которую вы хотели бы отображать в окне браузера, убедитесь, что ваша таблица находится между тегами <body> и </body> в вашем HTML-документе. Начните свою таблицу со следующего тега:
<table>
Каждая горизонтальная строка в таблице начинается с тега:
<tr>
И каждая часть данных в строке начинается с тега:
<td>
Рассмотрим следующую табличную диаграмму:
A1 A2
B1 B2
C1 C2
Здесь у нас есть три строки и два столбца.
Для кодирования скелета этой диаграммы используются следующие теги в следующем порядке:
<table> запускает таблицу
<tr> начинает первую строку
<td> запускает первую «ячейку» данных (A1)
</td> закрывает ячейку A1
<td> запускает вторую ячейку (A2)
</td> закрывает ячейку A2
</tr> закрывает первую строку
<tr> начинает вторую строку
<td> запускает первую ячейку данных во второй строке (B1)
</td> закрывает ячейку B1
<td> запускает ячейку B2
</td> закрывает ячейку B2
</tr> закрывает вторую строку
<tr> начинает третью строку
<td> начинает первую ячейку данных в третьей строке (C1)
</td> закрывает ячейку C1
<td> запускает ячейку C2
</td> закрывает ячейку C2
</tr> закрывает третью строку
</table> закрывает стол
Многие дизайнеры любят делать отступы в частях своих таблиц, чтобы код было легче читать. Пример этого показан ниже.
Теперь мы добавим данные и рамку в скелетную таблицу. Граница является контур таблицы. Границы метки (граница = «значение») помещается в пределах исходной таблицы тега. Вы можете указать, какой толщины вы хотите, чтобы контур выглядел, присвоив определенное значение (мы присвоим значение «1»). Хорошая идея - поэкспериментировать с разными значениями, чтобы узнать, как они выглядят в браузере. Если вы не хотите, чтобы граница отображалась, присвойте значение «0».
(Примечание: даже если вы не планируете создавать границу вокруг таблицы, всегда лучше начинать с видимой границы, по крайней мере, до тех пор, пока вы не устраните какие-либо «ошибки», которые могут повлиять на способ отображения таблицы. )
Введите (или вырежьте и вставьте) следующий код и данные в свой HTML-документ:
Code:
<table border = 1>
<tr> <td> A1 </td>
<td> A2 </td> </tr>
<tr> <td> B1 </td>
<td> B2 </td> </tr>
<tr> <td> C1 </td>
<td> C2 </td> </tr>
</table>Есть много атрибутов, которые вы можете назначить таблице. Далее следует обсуждение тегов, которые позволят вам форматировать таблицу множеством творческих способов.
В следующем разделе мы узнаем, как изменить цвет фона таблицы.
Изменение цвета фона таблицы
Измените цвет фона всей таблицы с помощью тега «bgcolor» внутри исходного тега «table»:Пример: <table bgcolor = "yellow">
Цветной фон также можно назначить строке или ячейке в таблице. Просто добавьте bgcolor = "color" к тегу <tr> или <td>, чтобы раскрасить эту конкретную часть таблицы.
Пример: <tr bgcolor = "yellow">
Размер таблицы
Ширина и высота строк и столбцов в таблице автоматически увеличиваются, чтобы соответствовать длине данных и / или пространству окна браузера. Чтобы указать ширину и высоту, включите значения пикселей или процентов в начальный тег "table":Пример: <table width=300 height=400>
Ширину и высоту также можно указать для отдельной ячейки данных, а не для таблицы в целом. Для этого добавьте width = "value" в соответствующий тег <tr> или <td>.
Опять же, неплохо просто поэкспериментировать со значениями пикселей и процентов, чтобы узнать, как они выглядят в браузере.
Cellpadding
Тег "cellpadding" указывает (в пикселях) количество пространства между краями каждой ячейки и данными внутри каждой ячейки. Используйте его в начальном теге "table":Пример 1: <table border = 1 cellpadding = 5>
Пример 2: <table border = 1 cellpadding = 15>
Cellspacing
Тег "cellspacing" указывает (в пикселях) расстояние между каждой ячейкой. Используйте его в теге "table":Пример 1: <table border = 1 cellspacing = 5>
Пример 2: <table border = 1 cellspacing = 15>
Заголовки таблиц
Чтобы создать полужирный и центрированный «заголовок» для столбца или строки в таблице, используйте тег <th> вместо тега <td> в кодировке для вашей первой строки.Пример:
Code:
<table border = 1>
<tr> <th> Столбец 1 </th>
<th> Столбец 2 </th> </tr>
<tr> <td> А </td>
<td>B</td> </tr>
<tr> <td> C </td>
<td>D</td> </tr>
</table>Выравнивание и заполнение ячеек
По умолчанию все содержимое ячеек в таблице (за исключением заголовков таблиц) выравнивается по вертикали по центру и по левому краю. Чтобы выровнять содержимое ячейки по-разному, примените следующие теги в тегах <td>, <th> или <tr>:Для горизонтального выравнивания значения могут быть влево, вправо или по центру:
Пример: <tr align = "center">
Для вертикального выравнивания значения могут быть верхним, нижним или средним:
Пример: <td valign = "top">
Вы также можете настроить выравнивание всей таблицы, чтобы решить, где она будет отображаться на странице. Если вставить теги <align = "right"> или <align = "left"> в исходный тег "table", текст будет обтекать вашу таблицу, где бы он ни находился. Или, если вы хотите, чтобы ваша таблица стояла отдельно, без обтекания текста, используйте теги «выравнивания деления» до и после всей таблицы.
Распределение ячеек
«Объединение» происходит, когда одна ячейка охватывает две или более других ячеек в таблице.Для охвата столбцов тег <colspan = value> помещается в тег <td>, где он применяется. Вот пример кода:
Code:
<table border = 1>
<tr> <td colspan = 2> Эта ячейка занимает более двух столбцов </td>
<td> Эта ячейка занимает один столбец </td> </tr>
<tr align = "center"> <td> A </td> <td> B </td> <td> C </td> </tr>
</table>Для объединения строк тег <rowspan = value> помещается в тег <td>, где он применяется. Например:
Code:
<table border = 1>
<tr> <td rowspan = 2> Эта ячейка занимает более двух строк </td>
<td>A</td><td>B</td></tr><tr><td>C</td> <td> D </td>
</tr> </table>Поэкспериментируйте и практикуйтесь с различными инструментами и тегами, которые вы узнали в этой статье. Когда дело доходит до использования таблиц на веб-странице, творческие возможности безграничны. Сложите изображения и цветные поля без полей, чтобы создать цельный дизайн, или вложите таблицы без полей в таблицы без полей, некоторые с цветом, некоторые без полей, чтобы создать привлекательные макеты. Пределы дизайна веб-страниц расширяются благодаря небольшому воображению, творчеству и использованию таблиц.
Создание рамок
Некоторые веб-дизайнеры используют фреймы на своих страницах в целях дизайна и для того, чтобы сделать сайт более удобным для пользователя. Фреймы упрощают навигацию по сайту, так сказать, не теряя места. Вы знаете, что фреймы использовались, когда часть веб-страницы оставалась неподвижной, а другая часть той же страницы изменяется при нажатии на ссылку. Чтобы проверить веб-страницу с рамками, посетите The Birch Aquarium.На странице «Березовый аквариум» верхняя и самая нижняя части страницы остаются неизменными, а средняя часть изменяется в соответствии с выбранной ссылкой. Эта страница разделена на три фрейма, что означает, что одновременно отображаются три разных HTML-документа. Вы можете выбрать, на сколько разделов вы хотите, чтобы ваша страница была разделена, каким образом они будут разделены и какие HTML-документы вы хотите включить в каждый фрейм.
Во-первых, важно хорошо спланировать свою страницу. Рассмотрим макет с точки зрения строк и столбцов. Сколько горизонтальных секций или строк вы хотите отобразить? Сколько вертикальных секций или столбцов? Как вы оцениваете, сколько места (в пикселях или в процентах) потребуется для каждой секции?
Документ с набором фреймов Документ с набором фреймов - это HTML-документ, который предписывает браузеру упорядочивать содержимое веб-страницы определенным образом. В документе с набором фреймов тег «набор фреймов» заменяет тег «body».
Вы начнете документ с набором фреймов в обычном формате HTML:
<html><head><title>Title</title></head>
Затем вставьте тег "frameset":
Пример: <frameset rows = "20%, 80%">
Этот тег указывает, что страница будет разделена на две части, верхнюю и нижнюю, на что указывают два значения в теге. Если бы потребовались три строки, вы бы включили три значения:
Пример: <frameset rows = "10%, 50%, 40%">
Числовые значения сообщают браузеру, какой объем места в окне браузера должен занимать каждый раздел. Вы можете использовать процентные значения или значения пикселей. Знак «*» также может использоваться вместо значения, указывая, что конкретный раздел может использовать любое пространство, доступное в окне браузера:
Пример: <frameset rows = "100, *, 50">
Этот тег указывает, что страница будет разделена на три строки. Первый (верхний) кадр будет занимать 100 пикселей пространства, нижний кадр будет занимать 50 пикселей пространства, а средний кадр будет занимать все пространство, оставшееся в окне браузера.
Если ваша страница должна быть разделена на столбцы, используйте тег frameset для столбцов вместе с числовыми значениями:
Пример: <frameset cols = "200, *">
Этот тег указывает браузеру разделить страницу на две колонки. Левый столбец займет 200 пикселей пространства. Правый столбец будет занимать все свободное место в окне браузера.
Вы также можете комбинировать строки набора фреймов и столбцы набора фреймов для создания довольно сложных макетов. «Вложение» документов с набором фреймов обсуждается далее в этой статье.
Добавление источника кадра
Если вы еще этого не сделали, создайте HTML-документы, которые будут занимать каждый фрейм на вашей странице. Вы можете использовать HTML-документы, созданные в предыдущих главах.Теперь вы добавите в свой документ с набором фреймов теги «frame src», которые сообщат браузеру, какие HTML-документы помещать в каждый фрейм:
Пример:
Code:
<html><head> <title> Тест набора фреймов </title> </head> <frameset cols = "200, *">
<frame src = "links.htm"> <frame src = "information.htm"> </frameset> </html>В этом примере показан документ с набором фреймов, который разделит веб-страницу на два столбца или фрейма. В левом фрейме на 200 пикселей будет отображаться документ «links.htm». Остальная часть страницы, правый столбец, будет отображать документ «information.htm». Вы также можете увидеть теги, используемые для закрытия документа с набором фреймов:
</frameset>
</html>
Именование ваших фреймов
Обычно веб-страница содержит фреймы для отображения дополнительной информации, расположенной на том же сайте, или ссылки на нее. Сайт «Березовый аквариум» - это пример фреймов, используемых для ссылки на информацию на том же сайте. Строка меню со ссылками вытягивает информацию в средний фрейм веб-страницы при щелчке по ссылке, не затрагивая внешние фреймы страницы.Чтобы браузер знал, в какой фрейм помещать связанную информацию, вы должны «назвать» свои фреймы. Если вы не укажете, какой фрейм должен получить новую информацию, фрейм меню со ссылками будет заменен самой связанной информацией, что нарушит внешний вид и цель вашей страницы с фреймами.
Чтобы назвать фрейм, просто поместите тег «name» в тег «frame src» в документе набора фреймов. Вы можете дать каждому кадру любое имя по вашему выбору.
Пример:
Code:
<frame src = "links.htm" name = "menu">
<frame src = "information.htm" name = "info">Пример: <a href="https://www.carder.market/company.htm" target="info"> Информация о компании </a>
Это указывает браузеру отображать связанную информацию во фрейме с именем «info».
Сохранение и просмотр вашего документа
Как и обычные HTML-документы, документы с фреймами сохраняются с расширениями .htm или .html. Обязательно храните файл набора фреймов в той же папке, что и документы HTML, которые будут отображаться в его фреймах.Когда вы открываете документ с набором фреймов в браузере, вы должны увидеть разделенный экран с отдельным HTML-документом в каждом фрейме.
В следующем разделе мы узнаем, как удалить полосы прокрутки и границы.
Удаление полос прокрутки и границ
Простая страница с «вложенными» фреймами.
Если вы предпочитаете «чистый» вид вашей страницы, без каких-либо полос прокрутки и границ, вы можете указать это с помощью тегов, помещенных в тег «frame src».
Удалите полосы прокрутки, добавив тег scrolling = no.
Пример: <frame src = "links.htm" scrolling = no>
Удалите границы, добавив тег «frameborder = 0».
Пример: <frame src = "links.htm" frameborder = 0>
Вы также можете указать ширину и высоту поля для каждого кадра, добавив теги «marginwidth = value» и «marginheight = value». Вы можете сделать поля любым желаемым значением в пикселях. Снова вставьте эти теги в тег frame src.
Несколько кадров
Можно комбинировать различные строки и столбцы фреймов, создавая документы с набором фреймов, установленные в других документах с набором фреймов. Организация тегов, необходимых для достижения этого эффекта, может быть довольно сложной. На изображении вверху страницы показан пример простой страницы с «вложенными» фреймами.Документ набора фреймов, созданный для этого макета:
Code:
<html><head> <title> Frame Test </title> </head> <frameset rows = "20%, 80%">
<frameset cols = "70%, 30%"> <frame src = "logo.htm"> <frame src = "address.htm">
</frameset> <frameset cols = "85%, 15%> <frame src =" info.htm ">
<frame src = "links.htm"> </frameset> </frameset> <html>В разобранном виде каждая строка тегов "frame" обозначает следующее:
<frameset rows = "20%, 80%">
В этом документе две строки. Верхний ряд занимает 20 процентов доступного вертикального пространства. Нижний ряд занимает 80 процентов. Фактически, эти значения определяют высоту каждой строки.
<frameset cols = "70%, 30%">
В первой строке два столбца. Левый столбец занимает 70 процентов доступного горизонтального пространства, а правый столбец занимает 30 процентов. Фактически, эти значения определяют ширину каждого столбца.
<frame src = "logo.htm">
«Логотип» документа HTM появится в первом столбце первой строки.
<frame src = "address.htm">
«Адрес» документа HTM появится во втором столбце первой строки.
</frameset>
Первый набор фреймов столбца завершен.
<frameset cols = "85%, 15%>
Во втором ряду есть два столбца. Левый столбец занимает 85 процентов доступного горизонтального пространства. Правая колонка занимает 15 процентов.
<frame src = "info.htm">
«Информация» документа HTM появится в первом столбце второй строки.
<frame src = "links.htm">
«Ссылки» на документ HTM появятся во втором столбце второй строки.
</frameset>
Набор фреймов второго столбца завершен.
</frameset>
Полный набор фреймов готов.
Фреймы - отличный инструмент, который можно использовать, чтобы сделать вашу веб-страницу еще более привлекательной и динамичной. Они позволяют вам поддерживать определенные аспекты вашей страницы даже тогда, когда пользователь нажимает ссылку на другую часть вашего сайта или на другой сайт полностью. Чтобы продолжить создание веб-страницы своей мечты, ознакомьтесь со следующим разделом, посвященным изображениям.
Изображения
Когда вы начнете создавать страницы, первое, что вы захотите добавить, - это графику. Люди - визуальные животные, и графика может полностью изменить характер страницы. Вы можете использовать крошечную графику, длинную тонкую графику, большие изображения или даже анимацию.Превратите графику в маркер, просто вставив тег изображения там, где вы хотите, чтобы маркер отображался; вам не нужно использовать тег <ul>.
Длинную тонкую графику можно использовать в качестве разделителей. Более крупную графику можно использовать для логотипов или иллюстраций - практически всего, что вы можете придумать.
Есть два способа получить графические изображения: вы можете загрузить их с различных сайтов с бесплатными картинками в Интернете, или вы можете создать их самостоятельно. Некоторые сайты, предлагающие бесплатную графику и анимацию, включают Page Works, A-1 All Free Clip Art и The Free Graphics Store. Вы также можете посетить The Free Site, Web Places и Free Graphics, чтобы найти каталоги сайтов с бесплатными изображениями.
Допустим, вы заходите на сайт с бесплатной графикой и видите понравившееся изображение. Если вы щелкните изображение правой кнопкой мыши, появится меню с одним из вариантов «Сохранить изображение как…». Вы должны сохранить изображение в каталоге, в котором находится ваша веб-страница.
Если вы хотите создавать свои собственные изображения, вам понадобится программа, которая может редактировать файлы GIF и JPG. Одна очень популярная программа для редактирования изображений, доступная в Интернете, называется Paint Shop Pro. Вы можете получить копию, нажав здесь. После небольшой практики и небольших художественных способностей вы скоро станете профессионально создавать изображения!
Как описано в разделе «Основные теги форматирования HTML», изображения вставляются на веб-страницу с помощью тега:
<img src = "имя файла">
Вы также можете использовать изображение как ссылку на другую страницу или элемент. Для этого просто вставьте тег img src после тега привязки. Обязательно укажите «border = 0», иначе вокруг вашего изображения появится некрасивая рамка.
Пример: <a href="https://www.carder.market"> <img src = "logo.jpg" border = 0> </a>
В этом примере, если пользователи щелкают изображение «logo.jpg», они будут перенесены на домашнюю страницу Carder.uk по адресу «https://www.carder.market».
Любое цифровое изображение также можно использовать в качестве фона для вашей страницы. Для этого добавьте background = "image file name" в тег <body>.
Пример: <body background = "logo.jpg>
В следующем разделе мы узнаем, как маркировать изображения.
Маркировка изображений
Другой полезный, но не обязательный тег, который вы можете добавить к тегу изображения, - это «alt». Этот тег дает вашему изображению метку, которая появляется, когда пользователь наводит указатель мыши на изображение. Он также появляется перед тем, как изображение появляется, когда ваша страница загружается в браузере, удерживая интерес пользователя, пока изображение появляется. Вы можете вставить любое сообщение с помощью тега "alt".Пример: <img src = "logo.jpg" alt = "Информация о форуме">
Если ваши изображения не работают ...
Мы получаем изрядное количество писем от людей, у которых возникают проблемы с добавлением изображений на свои страницы. Когда GIF и JPG не работают, они обычно отображаются как маленький красный крестик.Когда вы видите эту проблему на своих страницах, это означает одно: вы не ввели правильное имя файла для изображения. Вот несколько шагов, которые вы можете предпринять, чтобы исправить проблему:
- Начните с упрощения процесса. Поместите файл HTML и файл изображения в один каталог. Переименуйте файл изображения в xyz.gif (или xyz.jpg). Создайте тег с надписью на вашей HTML-странице. Отобразите страницу в вашем браузере. Если вы все еще видите красный крестик вместо изображения, то ...
- Убедитесь, что переименованный файл действительно называется xyz.gif. На машине UNIX регистр имеет значение, поэтому убедитесь, что все, что должно быть в верхнем регистре, должно быть в верхнем регистре, а все, что должно быть в нижнем регистре, должно быть в нижнем регистре. Имя Xyz.gif полностью отличается от xyz.gif для UNIX-машины.
- На компьютере с Windows операционная система иногда добавляет суффикс к имени файла, не сообщая вам об этом. Например, вы можете увидеть xyz.gif в проводнике, но Windows могла назвать файл xyz.gif.gif. Самый простой способ узнать, произошло ли это, - использовать команду dir в командной строке MS-DOS, чтобы вы увидели настоящие имена файлов. Если Windows фактически добавляет суффиксы, вы можете просто отключить это поведение с помощью диалогового окна параметров в проводнике.
Выравнивание изображений
Горизонтальное выравнивание изображений на странице отформатирован с помощью тегов и методы , описанные в разделе обоснования. Вот краткий обзор:- Используйте тег <div align =. ".."> перед тегом изображения для центрирования или выравнивания по правому или левому краю.
- Используйте тег </div> после тега изображения, чтобы завершить выравнивание.
- Используйте тег <align =. ".."> внутри тега "img src", чтобы текст обтекал изображение.
align = "bottom" Текст выравнивается с нижней частью изображения.
<img src = "https://carder.market/gif/logo3.gif" alt = "Carders" border = 0 align = "bottom" >
align = "top" Текст выравнивается по верхней части изображения.
<img src = "https://carder.market/gif/logo3.gif" alt = "Carders" border = 0 align = "top" >
align = "middle" Текст выравнивается по центру изображения.
<img src = "https://carder.market/gif/logo3.gif" alt = "Carders" border = 0 align = "middle" >
В каждом из приведенных выше примеров изображение по умолчанию выравнивается по левому краю, поэтому текст отображается с правой стороны. Если вам нужен текст слева и изображение справа, вы можете добавить тег выравнивания изображения <div align>, описанный выше.
Получение вашей страницы в Интернете
Как только вы создадите звездную веб-страницу, вы захотите разместить ее на веб-сервере, чтобы ее мог увидеть весь мир. Многие службы и учреждения с веб-серверами предлагают бесплатное место для размещения ваших страниц. AOL предлагает своим членам бесплатное пространство, а многие колледжи предлагают место своим студентам. Есть также много коммерческих сайтов, предлагающих свободное место. Единственным недостатком этих опций является то, что вам, скорее всего, придется отображать рекламный баннер сайта вверху или внутри вашей страницы. Вот несколько из этих бесплатных коммерческих источников:У вас также есть возможность оплатить услуги хостинга за веб-пространство. Большинство профессиональных сайтов идут по этому пути. Услуги хостинга могут предоставить своим клиентам большие объемы пространства, особые возможности и надежность. Использование услуги хостинга также дает вам возможность использовать доменное имя, ваш собственный уникальный URL.
Если вы заинтересованы в получении собственного доменного имени, посетите страницу аккредитованных регистраторов на ICANN.org, агентстве, которое поддерживает IP-адреса и реестр доменов. На любом из перечисленных веб-сайтов вы можете проверить наличие доменных имен, которые вы рассматриваете, и приобрести то, которое вам нравится. Стоимость годового контракта обычно меньше, если у вас есть услуга хостинга, поэтому, когда вы серьезно относитесь к покупке доменного имени, сначала обратитесь в службу хостинга. Большинство хостинговых служб также зарегистрируют ваше доменное имя для вас, предоставив сетевым решениям IP-адреса и другую необходимую информацию.
Существует широкий спектр услуг хостинга, доступных по разным ценам. Остерегайтесь множества предложений, которые «слишком хороши, чтобы быть правдой». Вы можете столкнуться с медленными серверами, простоями, отсутствием поддержки и постоянным флеш-бизнесом.
Отличные инструменты Как только вы разместите свою страницу на сервере, вы захотите знать, какой трафик вы получаете. Такие места, как Show Stat , Hit Box или Site Meter, предоставляют эту услугу бесплатно и предоставляют очень полную статистику. Если вам просто нужен простой счетчик на своей странице, FastCounter - хороший инструмент.
Есть ряд инструментов, которые вы можете использовать, чтобы улучшить свой сайт. Например, этот бесплатный инструмент проверит ваш сайт на наличие орфографических ошибок, время загрузки по сети, метатеги, совместимость браузера и т.д.
Мы узнаем о метатегах в следующем разделе.
Создание анимированных GIF-файлов
Анимированные GIF-файлы добавляют вашим страницам движения и вспышки. Хорошим инструментом для создания анимированных GIF-файлов является The GIF Construction Set. Используя этот или другой подобный инструмент, вы можете создавать разные кадры в анимированной последовательности, а затем свернуть их в одно изображение.Мета-теги
Если вы планируете ввести свои страницы в поисковых системах (рассматриваются в следующем разделе) , чтобы другие люди могли их найти, вы хотите добавить мета теги на вашей странице. Два наиболее распространенных мета-тега позволяют вам указать описание и набор ключевых слов для страницы соответственно, а также вы можете объявить всевозможные другие вещи. Мета-теги всегда появляются между тегами <HEAD> и </HEAD> исходного HTML. Вот метатеги, которые появляются вверху главной страницы индекса для Carder.uk:
Code:
<Meta Name = "Description" Content = "Популярный кардинг форум">
<Meta Name = "keywords" Content = "кардинг, кардеры, форум кардеров, carding, carders, carders forum">
<Meta http-Equiv = "PICS-Label" content = '(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" for "https://www.carder.market "on" 1998.09.23T01: 29-0800 "r (n 0 s 0 v 0 l 0)) '>Первый тег - это описание страницы. Поисковые системы используют этот текст непосредственно в своих списках. Если у вас нет метатега описания, то поисковая система либо оставляет ваше описание пустым, либо использует первое или два предложения с вашей страницы.
Второй тег указывает набор дополнительных ключевых слов для страницы. Поисковые системы обычно индексируют каждое слово на странице, но во многих случаях вы не будете использовать определенное слово в своем фактическом тексте, которое может быть использовано кем-то, ищущим вашу страницу. Если вы знаете, что люди часто ошибаются в написании данного слова, вы также можете внести это слово в список ключевых слов.
Третий тег - это тег рейтинга RSAC. Вот описание того, что делает рейтинговая система RSAC, взятое с веб-сайта RSAC по адресу www.rsac.org:
Консультативный совет по развлекательному программному обеспечению - это независимая некоммерческая организация, базирующаяся в Вашингтоне, округ Колумбия, которая дает возможность общественности, особенно родителям, принимать информированные решения в отношении электронных носителей с помощью открытой, объективной системы консультирования по содержанию. Система RSACi предоставляет потребителям информацию об уровне секса, наготы, насилия, оскорбительных выражений (вульгарных или мотивированных ненавистью) в компьютерных играх и на веб-сайтах. На сегодняшний день RSACi интегрирован в браузер Microsoft, Internet Explorer и программное обеспечение Cyber Patrol от MicroSystem. CompuServe (США и Европа) также обязались оценивать весь свой контент с помощью системы RSACi».
Некоторые браузеры настроены на блокировку страниц без рейтинга, поэтому, оценивая свой сайт, вы избегаете проблем с этими браузерами. Оценивая свой сайт с помощью RSAC, вы также даете людям знать, какой контент вы предоставляете.
Есть ряд других тегов, которые вы обычно увидите, если посмотрите на исходный HTML-код других страниц в Интернете. Многие инструменты HTML автоматически вставляют теги. Например, вот два тега, которые Microsoft Word автоматически применяет к странице, если вы используете Microsoft Word для создания HTML:
Code:
<META HTTP-EQUIV = "Content-Type" CONTENT = "text / html; charset = windows-1252">
<META NAME = "Generator" CONTENT = "Microsoft Word 97">В любом случае метатеги не влияют на способ отображения вашей страницы в браузере. Чаще всего используются теги description и keywords.
Продвижение вашего сайта
После того, как вы потратили часы на создание своего сайта и разместили его на сервере, вы действительно хотите, чтобы люди пришли посмотреть на него. Но чтобы люди посещали ваш сайт, вы должны его продвигать. Мало кто случайно найдет ваш сайт - что-то должно их туда привести.Есть много разных техник, с помощью которых вы можете привлечь людей на свой сайт. Эта глава научит вас многим углам, которые вы можете использовать для увеличения посещаемости сайта.
Регистрация в поисковых системах
Поисковые системы читают веб-страницу и индексируют все слова со страницы. Пользователи поисковых систем могут найти вашу страницу по ключевым словам. Преимущество поисковых систем в том, что они позволяют найти все, что содержит определенное слово или набор слов. Плохая вещь в поисковых системах заключается в том, что они обычно возвращают много плевел с пшеницей.С точки зрения продвижения в Интернете, поисковые системы очень хороши тем, что легко разместить в них ваш сайт. Каждая поисковая система включает где-нибудь на своей странице ссылку «отправить сайт» или что-то в этом роде. Воспользовавшись этой ссылкой, вы сможете заполнить форму (некоторые более длинные, чем другие), в которой содержится запрос на включение вашего сайта в список. Ваш сайт не будет добавлен сразу, и иногда может потребоваться несколько представлений в течение определенного периода времени, прежде чем ваш сайт появится в списке. Все поисковые системы разные. Кроме того, не забудьте отправить каждую из ваших страниц индивидуально, чтобы убедиться, что ключевые слова с каждой отдельной страницы включены.
Вот список URL-адресов страниц "submit-a-site" некоторых основных поисковых систем:
Регистрация на ссылочных сайтах На ссылочном сайте перечислены различные сайты в некоторой иерархической структуре. Каждый сайт помещается в категорию и получает краткое описание. Yahoo - лучший пример такого рода сайтов, но сейчас многие другие пытаются делать то же самое разными способами.
Большинство этих сайтов очень медленно принимают новые сайты, потому что люди должны просмотреть каждый отправленный сайт, прежде чем его можно будет добавить в коллекцию ссылок. Следующие ссылки указывают на домашние страницы каждого из этих сайтов ссылок, потому что вам необходимо просмотреть сайт, чтобы определить категорию для вашего представления, прежде чем вы сможете добавить свой URL. Как только вы найдете подходящую категорию, найдите кнопку «Добавить URL», чтобы добавить свой сайт.
В следующем разделе мы рассмотрим различные виды листинговых услуг.
Листинговые услуги
Если ваш сайт связан с бизнесом, вы должны отправить его на все следующие сайты. Эти сайты внесут вашу компанию в свои каталоги, некоторые бесплатно, а некоторые за плату:- AllSearchEngines
- b2bFreeNet
- Суперстраницы
- Biz Land
- Поисковые системы для предприятий
- EZDirectory
- SmallBiz
Услуги по регистрации Перечисленные ниже компании зарегистрируют ваш сайт в сотнях поисковых систем, иногда за определенную плату. Большинство из них также предлагают другие услуги по продвижению в Интернете. Некоторые из этих сайтов предлагают информацию о самостоятельном продвижении вашего сайта, поэтому вы можете посетить их, чтобы узнать, сможете ли вы найти идеи.
Ключевым моментом, который следует признать, особенно при рассмотрении вопроса о том, следует ли использовать эти службы для регистрации в поисковых системах, является то, что они не делают ничего, что вы не можете сделать сами. Вы можете зарегистрировать свой сайт так же хорошо, как и они, и все, что вам нужно знать, содержится в этой серии. Это просто вопрос, как лучше использовать свое время.
В следующем разделе мы рассмотрим взаимные ссылки.
Взаимное связывание
Пример рекламного баннера.
Взаимное связывание - это действие типа «Я почешу вам спину, если вы поцарапаете мою». Идея состоит в том, чтобы найти сайты, связанные с вашим, и отправить им электронное письмо с просьбой разместить на вас ссылку. Взамен вы обычно предлагаете обратную ссылку на них.
Лучший способ установить взаимные ссылки - просто просмотреть Интернет в поисках связанных сайтов и отправить им электронное письмо. Вы обнаружите, что процент ответивших составляет около 25 процентов. Но не помешает попробовать, и чем больше у вас ссылок в сети, тем больше трафика вы получите. Одна ссылка в нужном месте может существенно повлиять на трафик, который получает новый сайт.
Ниже приведены несколько ресурсов для создания взаимных ссылок:
Платная реклама
Если вам нужен быстрый трафик, один из лучших способов получить его - заплатить сайтам с высоким трафиком за рекламу вашей услуги. Платные рекламные объявления обычно появляются в виде длинных, тонких, мигающих рекламных объявлений в верхней части веб-страниц, и они называются баннерными рекламными объявлениями (хотя существует множество других типов рекламы - подробнее см. Как работает веб-реклама). Вот три примера баннерной рекламы:Большинство крупных сайтов с посещаемостью от 10 000 и более посетителей в день имеют стандартные рекламные программы. Типичная ставка составляет от 15 до 70 долларов за 1000 презентаций вашего объявления. Главное - найти сайт, который позволит вам нацеливать вашу рекламу на людей, которым будет интересно ваше сообщение.
Для получения дополнительной информации о баннерной рекламе см. Как работают баннерные объявления. По следующим ссылкам можно найти информацию о рекламных программах некоторых крупных поисковых систем. Большинство поисковых систем предлагают ту или иную форму рекламы - посмотрите на домашней странице, и вы обычно найдете ссылку на информацию о рекламе на сайте:
Дополнительная информация о продвижении веб-сайтов
Следующие статьи будут полезны для получения дополнительной информации о продвижении и маркетинге веб-сайтов:Идеи
Чтобы получить дополнительную информацию о веб-страницах, вы можете почерпнуть информацию с веб-страниц, которые вам нравятся, с помощью функции «Просмотр исходного кода». Если вы найдете веб-страницу, которая вам нравится, вы можете посмотреть ее HTML-код и увидеть, как они ее создали. Это отличный способ изучить новые техники HTML.Если вы хотите просмотреть коллекцию визуально ошеломляющих сайтов, чтобы почерпнуть некоторые идеи для своих страниц, попробуйте посетить страницу «Изобильный образ жизни» . Эта страница ссылается примерно на 100 сайтов, и многие из них впечатляют. См., В частности, сайты производителей автомобилей и ювелирных изделий. Когда вы найдете понравившийся вам вид, просмотрите исходный HTML-код этой страницы.
Чтобы получить массу дополнительной информации о HTML, веб-страницах и связанных темах, перейдите по ссылкам ниже.[/B]
Last edited:
