Как кодировать сайтХотите узнать, как создать сайт с HTML и CSS?


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

Но сначала, что такое HTML и CSS?

Ну, вы можете просто посмотреть оба термина в Википедии, но эти определения не очень удобны для читателя. Давайте немного упростим вещи:

  • HTML (Язык гипертекстовой разметки) определяет структуру и содержание веб-страницы – где дела идут, как они выложены, и какой на странице
  • CSS (Каскадные таблицы стилей) определяет стиль / презентация веб-страницы и элементов на ней

Вы не можете иметь одно без другого – оба работают вместе, чтобы составить окончательную веб-страницу, ее дизайн и содержание, которое на ней.

Запись; когда мы говорим «веб-страница», мы имеем в виду один HTML-документ – одну страницу, которая является частью вашего веб-сайта. Принимая во внимание, что «веб-сайт» – это полная вещь – весь ваш сайт со всеми его отдельными веб-страницами.

Как создать сайт с использованием HTML и CSS (оглавление):

  1. Изучите основы HTML
  2. Понимать структуру документа HTML
  3. Познакомьтесь с селекторами CSS
  4. Положите таблицу стилей CSS вместе
  5. Получить Bootstrap
  6. Выберите дизайн
  7. Настройте свой сайт с помощью HTML и CSS
  8. Добавить контент и изображения
  9. Тонкая настройка цветов и шрифтов
  10. Создать дополнительные страницы

Общее время создания сайта: 4-5 часов
Уровень мастерства: промежуточный

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

Contents

Прежде чем начать, соберите свои ресурсы:

Итак, первое, что вам нужно еще до создания сайта с HTML и CSS – это веб-сервер (хостинг). Не волнуйтесь, хотя; Вам не нужно покупать собственную машину. Многие хостинговые компании продают вам простой хостинг на своих машинах. Просто выберите «веб-хостинг» в Google и выберите что-то не слишком дорогое..

С отсортированным сервером следующая вещь, которая вам нужна, это доменное имя. Доменное имя – это то, что сайт идентифицируется в сети. Например, доменное имя этого сайта websitesetup.org.

Если у вас есть и доменное имя, и сервер, вы можете соединить их вместе.

Полное раскрытие: Мы получаем комиссию, если вы в итоге приобретаете Bluehost по нашим реферальным ссылкам в этом руководстве. Это помогает нам поддерживать и обновлять WebsiteSetup в актуальном состоянии. Спасибо за вашу поддержку.

Чтобы разобраться с этим безболезненно, мы рекомендуем зарегистрироваться в такой компании, как Bluehost.

Они будут обрабатывать все настройки для вас. Это означает, что они будут: (А) настроить учетную запись хостинга для вас, (Б) зарегистрировать доменное имя от вашего имени, (С) настроить все для совместной работы и (Д) дать вам доступ к простой в использовании приборной панели.

Идите вперед и зарегистрируйтесь Bluehost, мы подождем Когда вы вернетесь и настроите свой веб-сервер и будете готовы к работе, перейдите к следующему шагу..

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

1. Изучите основы HTML

Основным элементом структуры HTML является HTML тег.

Тег, например, выглядит так:

ЧТО-ТО

Здесь мы имеем дело с тег. Этот будет смелый фрагмент текста, который находится между открывающим тегом () и закрывающий тег (). В этом случае этот фрагмент текста ЧТО-ТО.

Но есть и другие теги, чтобы назвать несколько:

  • ... выделит курсивом текст между открывающим и закрывающим тегами
  • ... подчеркну это
  • ...

    это абзац текста


  • ...

    основной заголовок на странице

Помимо этих простых тегов, есть и более сложные теги. Например, если вы хотите создать список, подобный следующему:

  • Элемент 1
  • Пункт 2
  • Пункт 3

… Вы можете сделать это с помощью следующего HTML-кода:

  • Элемент 1
  • Пункт 2
  • Пункт 3

Или, если вы хотите добавить ссылку на другую страницу, например:

Это ссылка на нашу домашнюю страницу

… вы можете сделать это с помощью этого кода:

Это ссылка на мою домашнюю страницу

Прочитайте это, чтобы получить полный список тегов HTML. Это станет полезным, когда вы создаете сайт с HTML и CSS.

2. Понять структуру документа HTML

Думайте о своей HTML-странице, как если бы она была построена из Legos. Вы кладете разные кирпичи друг на друга, чтобы в итоге получить большую структуру.

Но вместо кубиков Lego вы получаете HTML-теги …

Вот самая простая структура документа HTML:





Привет мир!


Привет мир!

Моя первая веб-страница.

Вы можете взять приведенный выше код, скопировать и вставить его в новый файл, сохранить документ как index.html, и это будет совершенно действительная HTML-страница.

Давайте объясним отдельные части этого кода:

  • – первоначальная декларация документа
  • – другая декларация; говорит, что дальше будет HTML-документ на английском языке
  • – отмечает начало глава раздел; глава раздел, где находятся все основные параметры страницы; большинство из них не будут показаны на экране; они просто определяют, что происходит под капотом
  • – определяет, какой набор символов используется для написания документа; не нужно тратить на это слишком много времени; просто используйте это объявление как есть
  • Привет мир! – заголовок страницы; это то, что люди увидят в строке заголовка своих браузеров, например:

заголовок в веб-браузере при создании сайта с HTML и CSS

  • – отмечает начало тело раздел; это то, куда уходит все содержимое страницы; это основная часть документа HTML; позвольте нам подчеркнуть это, в этом разделе вы будете включать весь контент, который должен появиться на странице

  • Привет мир!

    – основной заголовок на странице

  • Моя первая веб-страница.

    – простой абзац текста

  • – закрывающий тег всего HTML-документа

Важное замечание здесь. Работа с файлом HTML в базовом текстовом приложении или сложном текстовом процессоре, таком как MS Word, не очень удобна. Чтобы упростить себе задачу, установите инструмент под названием Возвышенный текст. Он имеет версии для Mac и ПК, и это бесплатно.

Почему лучше? Среди прочего, он раскрасит синтаксис файла HTML. Это означает, что он будет визуально отличать ваши HTML-теги от текстового содержимого, параметров тегов и других значений. По сути, все это станет читабельным. Вот как выглядит наша простая структура HTML в Sublime Text:

возвышенный синтаксис хорош при создании сайта с HTML и CSS

Хорошо, вернемся к теме. Вы можете взять это новое index.html файл, скопируйте его туда, где находится основной каталог вашего веб-сервера, а затем просмотрите эту страницу, перейдя к ней через веб-браузер. Не слишком волнуйтесь, хотя; эта страница будет довольно некрасивой (см. ниже).

эта страница безобразна

Итак, страница ужасная, как сделать так, чтобы она не была такой?

3. Познакомьтесь с CSS-селекторами

Так же, как HTML имеет свои теги, CSS имеет селекторы.

Селекторы описывают, как данный элемент должен вести себя по внешнему виду. Вот пример селектора CSS:

п {
размер шрифта: 18 пикселей;
}

Этот селектор указывает, что все HTML

теги внутри документа будут иметь размер шрифта 18 пикселей.

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

Например, селектор класса в CSS выглядит так:

.обычный текст {
размер шрифта: 18 пикселей;
}

Обратите внимание на точку (.) перед названием класса (нормальный текст). Определив класс «normal-text», мы можем теперь назначить этот класс тем конкретным HTML-тегам, которые мы хотим сделать размером 18px.

Например:

Этот текст будет 18px.

Давайте еще одну минуту, чтобы объяснить все элементы этого фрагмента кода CSS выше:

  • .нормальный текст – определение класса; все после имени класса и между открывающей и закрывающей скобками {} определяет, как будут выглядеть элементы, назначенные этому классу
  • размер шрифта – пример свойства CSS
  • 18px – значение, присвоенное имуществу

Существует множество CSS-свойств, кроме перечисленных выше. размер шрифта. Вот полный список если вам интересно.

4. Соберите таблицу стилей CSS

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

Документы CSS часто упоминаются как таблицы стилей. По сути, таблица стилей CSS – это список всех определений классов, которые используются в соответствующем HTML-документе. Порядок определений классов не так важен большую часть времени (по крайней мере, для простых конструкций).

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

Это звучит как утомительная работа, и это.

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

Именно здесь в игру вступает вещь под названием Bootstrap.

5. Скачать / установить Bootstrap

Bootstrap – это набор инструментов с открытым исходным кодом для создания веб-сайтов с использованием HTML и CSS..

Говоря простым языком, Bootstrap позаботится об основной структуре документа HTML и таблицы стилей CSS. Он обеспечивает структуру, которая гарантирует, что основные леса вашей веб-страницы готовы и оптимизированы для дальнейшего развития..

По сути, Bootstrap позволяет вам не начинать с нуля, а вместо этого перейти прямо к забавной части. Благодаря этому вам не придется работать на часто скучных ранних этапах создания веб-сайта с использованием HTML и CSS..

Вы можете выбрать два пути:

  • вариант (А): learn Bootstrap – перейдите на домашнюю страницу Bootstrap, загрузите основной пакет Bootstrap и начните строить поверх него.
  • вариант (Б): сделайте ярлык – получите стартовый пакет для Bootstrap с красивым дизайном и уже созданной демо-страницей.

вариант (А) вначале может иметь некоторую кривизну обучения, но это ни в коем случае не является худшим способом создания веб-сайта с использованием HTML и CSS. Как только вы овладеете базовой структурой Bootstrap, вам будет проще создавать новые страницы и заставлять их выглядеть именно так, как вы этого хотите. Начальная документация отличное место, чтобы начать этот путь.

Мы собираемся пойти с вариантом (Б) для этого руководства. Мы делаем это по нескольким причинам, главный из них:

Начиная с готовой структуры избавляет от больших усилий при попытке выяснить основные потребности HTML-документа. Это позволяет вам сосредоточиться на интересных вещах – например, выкладывать контент и делать его хорошо выглядящим.

Короче говоря, обучение таким образом даст вам лучший результат быстрее, что, как мы полагаем, то, что вы хотите.

6. Выберите дизайн

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

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

Тема, которую мы собираемся использовать, называется творческий. Конечный эффект, к которому мы стремимся, будет выглядеть примерно так:

финальная домашняя страница после создания сайта с HTML и CSS

Для начала, шаблон Creative, нажмите на Скачать бесплатно кнопка справа эта страница) и сохраните пакет zip на рабочий стол.

Разархивируйте пакет и переместите его содержимое в главный каталог локального веб-сервера или в учетную запись веб-хостинга..

Теперь откройте это местоположение через веб-браузер. Вы увидите стоковую версию шаблона:

запустить шаблон начальной загрузки

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

7. Настройте свой сайт с помощью HTML и CSS

Давайте сначала поработаем над главной страницей дизайна. Это покажет нам, как заменить графику, тексты и настроить все в целом..

Мы кратко говорили о разделе заголовка HTML-документа выше. Давайте более подробно рассмотрим это здесь.

Когда вы открываете index.html В файле вашего сайта Bootstrap в Sublime Text вы увидите такой заголовок (для ясности мы удалили все несущественные элементы из этого кода *):






Creative - Начать тему Bootstrap





* Помимо вышесказанного, был также код для загрузки Google Fonts, иконки Font Awesome и модуль лайтбокса для изображений, отображаемых на странице..

Большинство объявлений здесь мы уже знаем, но есть пара новых:

  • Во-первых, все между скобки это HTML-комментарий. Не отображается на последней странице.
  • – это один из собственных тегов объявления Bootstrap. Он определяет размер области просмотра сайта.
  • – эта строка загружает таблицу стилей CSS шаблона Creative, а также содержит таблицу стилей по умолчанию Bootstrap.

Давайте изменим это последнее объявление – строку, загружающую CSS, – чтобы потом было легче работать.

Измените эту строку на:


Это небольшая разница – загружается не укороченная версия того же листа CSS. Эта версия просто легче изменить.

Теперь прокрутите вниз до самого низа index.html файл. Вы увидите следующие строки прямо перед закрытием тело тег:

        

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

Вместо этого давайте поработаем над добавлением нашего собственного контента на страницу:

8. Добавить контент и изображения

Первое, что вы хотите сделать, это изменить заголовок страницы.

1. Изменить заголовок

Найти заглавие тег в разделе заголовка и замените текст между тегами на что-то свое:

Мой HTML-сайт

2. Настройте раздел героя

Раздел героев – это то, что мы называем этим блоком:

раздел героя

Было бы здорово иметь собственный контент внутри. Чтобы изменить этот блок, вернитесь к index.html файл и найдите этот раздел:

...


...

Узнать больше

Весь этот блок кода контролирует то, что находится в разделе героя.

Здесь есть несколько новых тегов:


  • – это тег, определяющий, что весь этот раздел является заголовком страницы; этот тег имеет пару братьев и сестер в виде

    тег и

    тег
  • – это общий тег CSS, который указывает, что то, что следует, является отдельным разделом (иначе деление) в HTML-документе; его использование облегчает визуальное выделение отдельных разделов на странице

Вы также заметите, что некоторые другие теги (которые мы уже знаем) выглядят немного более сложными, с несколькими назначенными им классами CSS. Например:

...

Классы, присвоенные

тег здесь текст в верхнем регистре текст белый шрифт вес жирный шрифт.

Эти классы были созданы Bootstrap и разработчиком темы Creative. Хорошей новостью является то, что вы тоже можете свободно использовать их при создании сайта с HTML и CSS.

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

Если вы хотите увидеть полный список доступных классов, вы можете открыть основной creative.css файл, который находится в CSS Подкаталог Творческой темы.

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

Например, один из классов, назначенных для некоторых из абзацев в нашем index.html файл начертание шрифта света. Когда вы прыгаете в creative.css файл и Ctrl + F ища это имя класса, вы увидите, что он просто устанавливает начертание шрифта параметр вроде так:

.font-weight-light {
вес шрифта: 300;
}

Изменение текстов по умолчанию в index.html Файл очень прост. Просто найдите тег, который вы хотите редактировать, и измените, что находится между открывающим и закрывающим тегами..

Например, чтобы изменить основной заголовок, просто измените это:

Ваш любимый ...

На что-то вроде следующего:

Полюбуйтесь на мой HTML-сайт!

Вы можете сделать то же самое для всех абзацев и других тегов на странице..

Важно то, что вы также можете свободно добавлять новые абзацы. Например, мы можем взять абзац, который уже находится на странице, сделать его копию и вставить его прямо под исходным абзацем; вот так:

Начать загрузку можно ...

Пункт 2

Теперь, с заботой о текстах, давайте заменим изображение, которое на заднем плане.

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

Когда вы еще раз посмотрите на весь блок кода, обрабатывающий топ мачты раздел, вы увидите, что он назначен классу с именем топ мачты. Эта строка кода обрабатывает присвоение класса:

топ мачты класс – это тот, который помещает изображение на задний план всего блока.

Давайте откроем creative.css Снова подайте файл и найдите класс «masthead»:

header.masthead {
padding-top: 10rem;
padding-bottom: calc (10rem - 72px);
фон: линейный градиент (снизу, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
background-position: center;
повторение фона: без повтора;
background-attachment: scroll;
размер фона: обложка;
}

Этот код делает с нашим изображением все что угодно (например, добавление наложения, затенения и т. Д.), Но важная часть заключается в следующем: URL ( "../ IMG / BG-masthead.jpg"). Это строка, которая указывает, где найти фоновое изображение. Это будет в IMG подкаталог.

Чтобы изменить это фоновое изображение, сделайте любое собственное изображение, скопируйте его в IMG подкаталог, а затем скопируйте и вставьте его имя вместо оригинала BG-masthead.jpg файл. Короче, поменяйте это: URL ( "../ IMG / BG-masthead.jpg") к этому: URL ( "../ IMG / YOURFILE.jpg").

3. Настройте другие блоки на странице

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

Хотя во всех этих разделах содержание разное, сами разделы по структуре схожи. Все они имеют примерно одинаковый набор HTML-тегов – им назначены разные CSS-классы..

Лучший способ изменить страницу в соответствии с вашими потребностями – это пройтись по блокам один за другим и поэкспериментировать, изменив все вокруг..

Помимо изменения текстов, вы также можете перемещать целые разделы (части между

теги). Конечно, вы должны сделать это вручную (вырезать, а затем вставить элементы на место), это все еще просто сделать.

С учетом вышесказанного, есть две довольно базовые модификации, о которых мы еще не говорили. Давайте рассмотрим следующие:

9. Тонкая настройка цветов и шрифтов

Изменить цвета или шрифты очень легко в HTML и CSS. Самое простое, что вы можете сделать, – это присвоить какой-либо встроенный стиль тегу HTML. Например:

Красный текст

В HTML цвета представлены их шестнадцатеричными значениями; «# FF0000» красный. Вот таблица всех остальных стандартные цвета.

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

p.red {
цвет: # FF0000;
}

А затем используйте следующий фрагмент кода HTML в основном документе:

Красный текст

Этот второй метод в основном то, как все делается в Bootstrap.

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

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

К вашим услугам

Чтобы изменить его цвет, лучше всего создать новый класс, скажем,, .текст-оранжевый и установите значение цвета там, вот так:

.text-orange {
цвет: # f4623a! важный;
}

* The !важный убедится, что эта настройка цвета перезапишет любую другую настройку цвета, которая была до него.

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

К вашим услугам

С этими изменениями заголовок теперь будет оранжевым:

оранжевый h2

Чтобы изменить шрифт и его размер, вы можете сделать что-то очень похожее. Но сначала пример того, как выглядит блок определения шрифта в CSS:

.SOMECLASS {
семейство шрифтов: "Merriweather", Roboto, без засечек;
размер шрифта: 18 пикселей;
}
  • загрузить шрифты Merriweather, Roboto, и система по умолчанию без засечек шрифт (прочитайте это, чтобы узнать о веб-безопасных шрифтах)
  • установите размер шрифта 18px

Такое определение можно поместить в любой класс CSS, как определение цвета. На самом деле, определения шрифта и цвета часто встречаются в одних и тех же объявлениях классов..

Возвращаясь к нашему предыдущему примеру, чтобы изменить размер шрифта для этого заголовка с надписью «К вашим услугам», мы могли бы сначала создать такой класс:

.text-xxl {
размер шрифта: 50 пикселей;
}

А затем назначьте этот класс заголовку:

К вашим услугам

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

10. Создайте дополнительные страницы

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

При создании веб-сайта с использованием HTML и CSS вы можете создать любое количество подстраниц, а затем связать их все вместе..

Вот некоторые общие страницы, которые нужны большинству веб-сайтов:

  • о странице
  • контакт
  • портфолио
  • Продукция и Услуги
  • команда
  • политики (политика конфиденциальности, условия и т. д.)

1. Начните с макета

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

При создании сайта с HTML и CSS ничто не мешает вам создавать без разницы макет вы хотите. Единственная сложность на самом деле собрать его вместе.

С HTML и CSS может возникнуть сложность, когда вы начинаете с пустого экрана, поэтому здесь мы также будем использовать Bootstrap. Сначала мы покажем вам некоторые принципы создания макета, а затем продемонстрируем, как это сделать с помощью Bootstrap..

Вы можете думать о макете своей веб-страницы, рассматривая ее как последовательность отдельных блоков – один поверх другого. Примерно так (обратите внимание на четыре отдельных блока):

макет при создании сайта с HTML и CSS

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

В этом разделе руководства мы собираемся создать новую страницу «о».

Для начала мы создадим просто очень простой проект макета. Что-то вроде того, что выше.

  • вверху есть меню навигации,
  • блок заголовка полной ширины под меню,
  • основной раздел контента в середине, в штучной упаковке в центре экрана (не во всю ширину),
  • и нижний колонтитул.

Теперь давайте создадим этот макет в HTML.

2. Создайте новую страницу

Самый простой способ начать работу над новой страницей – дублировать существующую страницу и использовать ее в качестве шаблона. Это то, что мы собираемся сделать.

Создать копию index.html файл и переименовать его about.html.

Чтобы на раннем этапе было легче различить страницы, отредактируйте новый about.html файл и изменить то, что в </code> тег. Например, <code><title>Обо мне.

Теперь давайте посмотрим на файл построчно и решим, что мы оставим, а что удалим:

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

Это делает наш текущий код довольно простым. Это в основном только это:



























То, что нам здесь не хватает, это основное содержание раздел. Чтобы построить его, мы собираемся повторно использовать раздел about.

Идите вперед и сделайте копию раздела о. Вот этот:

...


...

Теперь измените первые две строки на это:

Так как нам не нужны

заголовок там и


элемент, давайте просто удалим их. Единственное, что осталось внутри всего этого блока, это абзац текста. Вот так:

Абзац текста.

Когда вы сохраните файл и перейдете к нему через браузер, вы увидите, что у вас в основном есть два очень похожих блока, один под другим, с одинаковым цветным фоном:

о заголовке страницы

Было бы лучше иметь белый фон в главном разделе контента. Чтобы изменить это, единственное, что нам нужно сделать, это удалить BG-первичный класс от основного

тег. Другими словами, сделайте тег в это:

Так-то лучше:

о заголовке страницы 2

Давайте добавим несколько фиктивных абзацев на страницу, чтобы заполнить их еще, плюс, возможно, подзаголовок:

Лорем Ипсум Долор Сит Амет, Концертёр Адептисинг Элит...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

подзаголовок

Лорем Ипсум Долор Сит Амет, Концертёр Адептисинг Элит...

Вот как это выглядит на странице:

о версии 1

Если вам не нравится центрирование текста, просто удалите текст-центр класс от одного из

теги.

о вер 2

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

а также

теги:

Лорем ипсум долор сит амет...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

подзаголовок

И вот эффект:

о вер 3

Еще одна вещь, которую мы собираемся сделать здесь, это добавить изображение где-то на странице.

Вот как выглядит пример тега изображения в HTML:


Довольно просто, правда? Единственный параметр – это путь к файлу изображения. Чтобы все было хорошо организовано, вы можете поместить свое изображение в IMG снова каталог (как вы сделали с этим фоном некоторое время назад). В таком случае тег изображения будет:


При этом тег изображения в этой конкретной конфигурации довольно ограничен. Чтобы сделать его немного более изысканным, давайте назначим ему несколько классов Bootstrap. В частности:


Эти два класса придадут вашему изображению скругленные углы, а также обеспечат, чтобы размер изображения не превышал размер блока, в котором он находится..

Теперь вы можете добавить такой тег где-нибудь в главном разделе контента вашей страницы about. Например, здесь:

Лорем ипсум долор сит амет...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

подзаголовок

И вот окончательный эффект на странице:

о вер 4

Вот наша страница о нас во всей красе:

о странице завершена

3. Ссылка на новую страницу

Когда новая страница готова, давайте теперь свяжем ее с домашней страницей ( index.html файл). Естественно, лучшее место для добавления этой ссылки – в меню навигации (ниже ).

В частности, ищите эту строку:

Около

Мы собираемся изменить это на это:

Около

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

Когда вы обновите домашнюю страницу сейчас, вы увидите новую ссылку, указывающую на страницу о программе..

Дальнейшее чтение:

На этом этапе вы в основном создали себе простой веб-сайт, состоящий из двух страниц: домашняя страница и около страница.

Теперь вы должны промыть и повторить, создавая новые страницы, настраивая их, добавляя к ним контент, а затем связывая все из меню навигации..

В процессе выполнения этих шагов стоит сделать еще кое-что, – это дальнейшее изучение принципов HTML и CSS, прохождение контрольного списка, а также изучение Bootstrap, его структур и классов. Некоторые ресурсы для этого:

  • Шпаргалка HTML5
  • Шпаргалка по CSS
  • Шпаргалка Javascript
  • Учебник HTML
  • Учебник по начальной загрузке
  • Bootstrap шпаргалка

Освоение Bootstrap, скорее всего, лучший путь для создания оптимизированных и красивых веб-сайтов с использованием HTML и CSS..

Если у вас есть какие-либо вопросы о создании веб-сайта с использованием HTML и CSS, не стесняйтесь отправлять их в комментариях.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me