Да, создать веб-страницу легко, хотя вы не являетесь ИТ-специалистом или человеком, занимающимся ИТ-вещами. Базовая веб-страница состоит из простых HTML-тегов или кодов, и HTML легко изучить.
Пройдя это руководство, вы узнаете, как создавать собственные веб-страницы для своего веб-сайта. Сюда входят следующие темы, разделенные на три (3) части:
Часть 1:
Схема веб-страницы
Создание шаблона веб-страницы
Размещение невидимых комментариев в вашем коде
Создание одинарных или двойных пространств
Создание упорядоченного списка и неупорядоченного списка
Вставка изображения
Часть 2:
Создание таблиц
Использование блоков CSS в качестве макета веб-страницы
Часть 3:
Ссылки на другие страницы и другие веб-сайты
Использование CSS для стилизации веб-страниц.
Давайте обсудим здесь Часть 1:
Схема веб-страницы
Создание шаблона веб-страницы
Размещение невидимых комментариев в вашем коде
Создание одинарных или двойных пространств
Вставка изображения
Схема базовой веб-страницыЕсли вы новичок в HTML, я говорю вам, что веб-страница просто создается с помощью тегов HTML. Теги HTML отображаются как и . Посмотрите на схему веб-страницы ниже:
lt;голова>
lt;название>
Здесь вы разместите заголовок страницы. Тексты здесь отображаются в левом верхнем углу браузера или веб-страницы.
Это место для каскадных таблиц стилей, известных как CSS. CSS определяет стили, которые вы будете использовать на своей веб-странице, такие как цвет шрифта и размер текста, фоновое изображение, поля и т. д. Они применяются в теле страницы, но большинство определений стилей влияют только на те области, где вы их используете.
стиль>
голова>
lt;тело>
Здесь вы реализуете макет, используя определения стилей, которые вы сделали в разделе «стиль». Если не добавить сюда ничего, страница будет пустой, за исключением заголовка, который появится в самом верхнем левом углу страницы. Вы также разместите здесь содержимое вашего сайта. Это может быть смесь текстов, изображений, аудио и видео.
тело>
Вышеупомянутое необходимо сохранить как HTML-страницу с расширением html или htm. Если вы хотите увидеть, как приведенное выше будет выглядеть на веб-странице, скопируйте приведенное выше из в и вставьте в свой Блокнот или его аналог. Затем нажмите «Файл» — «Сохранить как» — введите mywebpage.html или mywebpage.htm в поле «Имя файла» — выберите «Все файлы» в качестве типа файла — нажмите «Сохранить». Затем перейдите в проводник Windows или файловый менеджер и откройте файл в браузере. Видеть? Это так просто. Не закрывайте Блокнот и браузер. Мы будем использовать это в своей практике.
Важное примечание: ваша домашняя страница или стартовая страница вашего веб-сайта должны называться index.html или index.htm. Это будет первая страница при вызове вашего веб-сайта без указания конкретной страницы. Как и на этом сайте, если вы наберете www.freetipsandwits.com или freetipsandwits.com по адресу браузера, откроется индексный файл. Если вам нравится это видеть, попробуйте щелкнуть ссылку на мой сайт. Вы можете задаться вопросом, почему индексный файл называется «index.php». Что ж, этот сайт основан на PHP, но не беспокойтесь об этом. Сначала ознакомьтесь с html, а позже вы сможете изучить php, asp, jsp, cgi и другие. В формате html вы должны сохранить индексный файл как «index.html» или «index.htm». Страницы, кроме домашней, должны быть сохранены с описательными ключевыми словами и дефисом в качестве разделителя. Это для поисковой оптимизации.
Создание базового шаблона веб-страницыВо-первых, я хотел бы, чтобы вы создали простой шаблон веб-страницы. Мы будем использовать это для отработки HTML-кодов, которые собираемся изучить позже. Итак, в файле mywebpage.html выше удалите все коды, которые вы ввели ранее, и введите следующее:
lt;голова>
Моя веб-страницастиль>
голова>
lt;тело>
тело>
Оставьте немного пробелов между тегами style и body. Теперь нажмите значок «Сохранить» или выберите «Файл» — «Сохранить». Если вы случайно закрыли этот файл, вы можете открыть его, выполнив поиск по файлу, щелкнув его правой кнопкой мыши, выберите «Редактировать» или «Открыть с помощью Блокнота» или его эквивалента. Чтобы увидеть, как это выглядит в Интернете, просто обновите страницу использования браузера, когда вы недавно открыли структуру HTML.
Размещение невидимых комментариев к вашим кодамЯ хотел бы, чтобы вы знали, как оставлять комментарии к вашим HTML-кодам. Веб-разработчики обычно добавляют комментарии в некоторые коды для дальнейшего использования, особенно для редактирования. Вам будет легко найти то, что вы ищете, когда вы обновляете или редактируете свои HTML-коды. Это поможет и другим веб-мастерам, если вы позволите им редактировать ваши коды. Эти комментарии отображаются только в необработанных HTML-кодах или в вашем HTML-редакторе, но не на веб-странице или странице браузера. Это делается следующим образом:
Например:
Создать свой сайт легко. Просто изучите базовые HTML-коды, и все готово. Не бойтесь HTML-кодов, их легко выучить. Когда вы начнете изучать HTML, вы будете требовать все больше и больше. и так далее, пока не станете опытным веб-разработчиком.
Введите указанное выше в mywebpage.html между тегами тела. Вы научитесь быстрее, если перепечатаете или переделаете вышеизложенное. Но если вы спешите, вы можете скопировать и вставить его. Сохраните его, нажав значок Сохранить или Файл – Сохранить.
Теперь обновите браузер для просмотра вышеуказанного html-файла. Видеть? Да, вы не можете видеть свои комментарии между . Итак, для справки и облегчения редактирования ваших кодов в будущем не забывайте оставлять свои комментарии.
Создание разрыва строки или создание пустого места в строкеЕсли вы хотите разорвать строку или создать пустое место в строке, используйте тег разрыва
. Посмотрите, как он используется ниже:
Это избавит партнерский
маркетинг от слова «партнер».
Этот сайт сломает
сайт от буквы «паутина».
Это приведет к оптимизации поисковой системы в две строки
от слова «движок».
Вы вводите это в тегах тела вашего mywebpage.html, сохраняете и обновляете браузер. Да, предложение разбито, и вторая строка начинается со слова «маркетинг» перед тегом разрыва. Слово также было разделено на две части, следующая строка начиналась со слова «сайт», отделенного от слова «веб-сайт». Два последовательных тега разрыва создавали двойной пробел между «движком» и «оптимизацией».
Создание упорядоченного и неупорядоченного списка.Это полезно, когда вы что-то перечисляете или перечисляете. См. иллюстрацию ниже:
Упорядоченный список
- Это упорядоченный список
ол>
Теперь введите приведенное выше в mywebpage.html в тегах body, сохраните его, обновите браузер и посмотрите результаты. Видеть? Он имеет последовательную нумерацию. Теперь вот неупорядоченный список:
Неупорядоченный список
- Это неупорядоченный список
Теперь введите приведенное выше в mywebpage.html в тегах body, сохраните его, обновите браузер и посмотрите результаты. Теперь он не пронумерован. Это в формате пули.
Вставка изображенияВы можете разместить изображение на своей веб-странице, вставив эти коды в те места, где вы хотите, чтобы изображения появлялись на вашей веб-странице:
Глядя на приведенные выше html-коды:
«img» — HTML-тег изображения;
«src» — источник или путь к файлу изображения с расширением gif, jpg и png;
«alt» — альтернативное текстовое описание на случай, если браузер не сможет отобразить изображение;
«высота» и ширина — это размер изображения;
«граница» — это контур изображения.
Сделай это:
Замените указанное выше доменное имя, каталог изображений и имя файла на свои.
Замените значения «alt» своим собственным описанием. Это необходимо для SEO или поисковой оптимизации;
Замените значения «высота» и «ширина» предпочитаемыми размерами изображения в пикселях, не искажая его. Размер изображения будет изменен в зависимости от указанных вами размеров. Исправление высоты и ширины изображения ускорит его загрузку;
Замените значение «границы» на желаемую толщину границы. 0 — нет границы.
Чтобы попробовать описанное выше, возьмите изображение из вашего файла и скопируйте его в каталог, где находится ваш mywebpage.html. Теперь введите приведенные выше коды в свой файл mywebpage.html, но замените src="http://your-domain-name.com/image-directory/image-file.gif" на src="image-filename". Затем сохраните его и обновите браузер, чтобы увидеть, как он выглядит в веб-браузере.
Продолжить Часть 2.
-
Продвижение Статей
19 Oct, 24 -
Интернет-Маркетинг Популярен И Популярен
19 Oct, 24 -
Миссия, Видение И Ценности
19 Oct, 24 -
«Это Сезон!»
19 Oct, 24 -
Почему Торговля На Форексе — Это Новый Тренд
19 Oct, 24
