Need help? Chat now!

Hostwinds Блог

Результаты поиска для:


Учебники Hostwinds: Как создать базовый веб-сайт для ведения блога без приложения для создания сайта, часть 1 Популярное изображение

Учебники Hostwinds: Как создать базовый веб-сайт для ведения блога без приложения для создания сайта, часть 1

от: Hostwinds Team  /  Декабрь 21, 2018


Начать с собой, откровенное признание или что-то профессиональное и стильное? Открытое признание это: я так взволнован этой серии блога. Я чувствую, что у меня есть целый устье бабочки в животе! Я люблю разработку и кодировку программного обеспечения, и на некоторое время это была моя мечта, чтобы научить прекрасную аудиторию, как сами, как создать очень простой (акцент на «базовом») веб-сайте с нуля. Мы здесь! Вы все можете быть моими маленькими морскими свинками, поскольку мы изучаем шаг за шагом, как генерировать базовые документы HTML и документы CSS (и потенциально намного больше!), Затем связывайте всеми из них вместе, тем самым создавая наш собственный веб-сайт. Это не будет просто средним веб-сайтом о кутелях котят. Нет, это не будет. На самом деле, потому что ведение блога, так как дети говорят в наши дни, «Удивительно, как каждый уровень и все уровни», мы создадим сайт блога! Это будет, как эти дети снова говорят: «Допинг». Нет времени, как настоящее, чтобы начать! HTML-документы: где вы начнете создавать веб-сайт, так как HTML представляет собой базу вашего сайта. Это весело! Прежде чем мы создадим HTML-документ и код с помощью языка компьютерного программирования HTML, вот некоторые вещи, которые нужно знать о самом HTML:

Что такое HTML?

Язык гипертекстовой разметки - это самая основная часть создания веб-сайта с нуля. Следующая цитата из предыдущего сообщения в блоге о HTML объясняет, что означает каждая часть «языка гипертекстовой разметки»:

«В «Гипертекст» в HTML относится к тексту, который ссылается на тексты, кроме самого себя.

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

В «Язык» В HTML объясняет, что HTML является компьютерным языком и имеет синтаксис и правила, такие как французский или испанский.

Я настоятельно рекомендую взглянуть на сообщение Post HTML Blog, прежде чем продолжить этот учебник, потому что 1. Это даст вам больше HTML-контекста, чтобы чувствовать себя более уверенно, наращивая сайт, и 2. Я бесстыдно подключил сообщение, потому что это как один из моихДругие дети блога, и я предвзятый о своем совершенстве.Ссылка ниже принесет вам право на этот блог, детка, я говорю:

Hostwinds HTML Hype

ПРЕДУПРЕЖДЕНИЕ ОБ СПОЙЛЕРЕ: Я буду беззастенчиво вставлять несколько сообщений в блоге, опубликованных ранее в ходе этого сообщения в блоге, потому что 1. Они актуальны и могут служить для вас шпаргалками, поскольку мы изучаем сложные процедуры, связанные с созданием веб-сайта и 2. Они все классные и их стоит беззастенчиво подключать.

Основы

Хорошо, теперь, когда мы чувствуем все удобные, зная, что HTML, время, чтобы получить ваш HTML-документ все настроен. Мы начнем с домашней страницы вашего сайта, иначе известны как посадочная страница веб-сайта. Мы откроем файл в любом текстовом редакторе, который вы предпочитаете. Я рекомендую NOTEPAD ++, если вы начинаете и возвышайте текст, если вы немного знакомы с разработкой / кодированием программного обеспечения / кодированием. Лучшие новости об этих текстах редакторов состоит в том, что они оба бесплатно!

Файловый менеджер cPanel также предлагает текстовый редактор. Говоря о cPanel, не стесняйтесь ссылаться на следующее сообщение в блоге, озаглавленное «Учебники Hostwinds: как настроить файлы веб-сайта в файловом менеджере cPanel». Он проходит через все этапы создания или загрузки файлов веб-сайтов, таких как документы HTML и CSS, в файловый менеджер cPanel:

Учебники Hostwinds: Как настроить файлы веб-сайта в файловом менеджере cPanel

Более того, один из HOVENDWINDS «Возлюбленные эксперты на передней линии, Abigail, написал Brilliant Base Base Base о создании домашней страницы для вашего сайта.В этом руководстве Abigail объясняет, что «если вы используете панель управления, такие как CPanel, вы добавим эти файлы на ваш каталог public_html или root для документа для вашего доменного имени.Если вы не используете панель управления, вы, скорее всего, добавят эти файлы в ваш / var / www / html, хотя расположение корня документа вашего домена может варьироваться. "

Файл HTML, который вы создаете в текстовом редакторе, обычно сохраняется как «index.html». Почему? Руководство Abigail обращается к этому точному вопросу: «Способ установки Apache, в вашей папке домена (или public_html), он читает ваш directoryindex, такой как index.htm, index.html или index.php, если эти файлы существуют и обслуживают этот файл как домашняя страница вашей папки. Если нет ни одного из этих файлов, то он покажет листинг индекса. Вы можете изменить свой индекс каталога через файл .htaccess. Не бессердечно подключить больше, но я также настоятельно рекомендую просмотреть оба данным а также сообщение в блоге о хранении файлов в cPanel, прежде чем продолжить, потому что оно предоставит вам заметки об обрыве в этой статье, а также некоторую дополнительную информацию о HTML, которую мы не можем затронуть. Нажмите ниже, чтобы проверить это:

Как создать собственную целевую страницу с помощью HTML и CSS

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

«Теги - это то, как мы идентифицируем разные элементы в нашем HTML-документе и вообще попадают в пары. Большинство тегов будут запустить \ <> и конец \, некоторые теги не будут иметь второй тег и закончится с помощью a /> это называется «пустой элемент», в основном видел по ссылкам и изображениям. "

Теги

Позвольте мне уточнить жизненно важной частью HTML-тегов. Они говорят браузеру, как вы хотите, чтобы ваш сайт был организован. Как упомянуто AbiGail, в целом, теги в комплекте с открытием и закрывающим тегом. Открытие тега сообщает компьютеру, который вы хотите организовать контент между ним и тегом закрытия определенным образом. Например, текст в следующем теге пункта (или P TAG) сообщает компьютеру, который вы хотите, чтобы абзац текста каким-то образом отображается на вашем сайте:

Здесь вы можете добавить абзацы текста на свой сайт.

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

Чтобы убедиться, что этот блог не так долго, как Titic, я приготовил сообщение в блоге исключительно о тегах HTML. Если вы не уверены в целях каждого тега, мы используем для создания нашего HTML-документа, щелкните ссылку ниже, чтобы просмотреть ваш HTML-тег Cheat:

Hostwinds HTML Hype Часть 2: Обсуждение тегов

Содержание

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

Например, содержимое тегов абзацев выше:

«Здесь вы можете добавить абзацы текста на свой веб-сайт».

Элемент

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

Здесь вы можете добавить абзацы текста на свой сайт.

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

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

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

В чем-то между и метками обозначает информацию, относящуюся к веб-сайту.

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

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

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

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

Комментарии

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

Примеры комментариев, которые можно разместить в вашем HTML-документе:

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

Мои фотографии моего резюме о доменной странице HOVENDWINDS

Приведенный выше фрагмент кода просто напомнил мне вставить этот самый ВАЖНЫЙ УВЕДОМЛЕНИЕ: Когда кусок кода я вставляю в эти сообщения в блоге, слишком долго вписывается в окно, небольшая полоса прокрутки появится в самом нижней части такого кода, когда вы наведите курсор мыши на эту область. Вы можете сдвинуть полосу прокрутки вправо, чтобы просмотреть весь кусок кода. Держите это в виду на протяжении всего этого блога и запчасти 2 и 3 этого блога серии.

Атрибуты

Атрибуты немного сложнее, но мы углубимся! Как сказано в сообщении блога «Hostwinds HTML Hype, часть 2: Tag Talk», атрибут определяет что-то об элементе.

Вот несколько примеров атрибутов, отличных от идентификаторов и классов (см. Сообщение в блоге о тегах HTML, если вы не уверены, что такое идентификаторы и классы и / или что они делают):

1. Программа «Href» Часть тега привязки является атрибутом, который указывает, на какой файл ссылается.

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

3. Пример кажется лучшим способом научить тому, что «Цель» атрибут делает.Допустим, у вас есть якорный тег в вашем документе HTML, который позволяет пользователям вашего сайта нажать на ссылку, которая требует их до домашней страницы HostWinds.

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

Дайте целевой атрибут имя (aka Value) «_self» для прямых пользователей на веб-сайт HOSTWINDS в том же окне, что они в настоящее время.

Дайте целевую атрибут имя (aka Value) «_blank», например, для прямых пользователей на веб-сайт HostWinds в новом окне (вкладка AKA).

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

Весь HTML-документ

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

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

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

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

Мой сайт для ведения блога

Обратите внимание, что я разместил метки навигационного бара в теги тела.Как мы уже обсуждали, это гарантирует, что навигационная панель будет видна на веб-странице.Открывающий тег навигации навигационной панели находится вправо под тегом открытия тела.Это гарантирует, что наша панель навигации будет в верхней части страницы.Тег прямо перед закрывающим тегом тела.Как упоминалось в «HostWinds HTML Hype Part 2: Tag Talk Talk», тег делает пространство между двумя элементами.Учитывая, что мы хотим пространство между нашей панелью навигации и следующим элементом, мы плинируем тег между двумя.

Шаг 2: Добавьте область, где ваши зрители могут нажать, чтобы просмотреть свой первый пост блога (AKA Самое последнее сообщение в блоге) ниже тега:

Мой сайт для ведения блога

Сообщение в блоге 1 Заголовок

Здесь вы можете разместить краткий обзор сообщения в блоге, если хотите.

Читать сообщение в блоге

УВЕДОМЛЕНИЕ У нас есть заголовок с именем Blog Post прямо над извлеченным изображением для поста блога прямо над синоптором поста в блоге прямо над кнопкой, которая приведет нас на веб-страницу, мы создадим сейчас для нашего первого поста в блоге.Имя файла HTML мы будем создавать для первого поста в блоге, будет «BlogPost1.html».В части 2 этой серии блога мы создадим еще три документа HTML, чтобы сделать три веб-страницы для трех гипотетических сообщений в блоге.Мы назовем эти три HTML-документов «Blogpost1.html», «Blogpost2.html» и «Blogpost3.html».Таким образом, мы можем ссылаться на них в наших якорных тегах, окружающих нашу кнопку теги.

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

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

Пути файлов: относительны против абсолют

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

Пример абсолютного пути к файлу:

<img src= “https://www.hostwinds.com/images/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

Пример относительного пути к файлу:

<img src= “/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

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

Шаг 3: Давайте быстро немного упорядочим наши файлы. Зайдите в свои файлы, в которых находится ваш документ index.html. Создайте папку с именем «изображения». Перетащите в эту папку все изображения, которые вы хотите использовать для своего блога. Рекомендуемое изображение для блога 1, рекомендуемое изображение для блога 2 и рекомендуемое изображение для блога 3 в сумме составляют три файла изображений. Вы можете называть файлы изображений как угодно, но для наших целей мы назовем их «your_image_goes_here_1.png», «your_image_goes_here_2.png» и «your_image_goes_here_3.png». Кроме того, в этом руководстве мы будем использовать различные изображения Hostwinds для избранных изображений.

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

Сообщение в блоге 1 Избранное изображение

Точка и косая черта в начале пути к файлу говорят браузеру начать с того места, где находится файл index.html, и погрузиться в папку «images». Косая черта после «изображений» указывает браузеру найти файл в этой папке.

Шаг 4: Добавьте область, где ваши зрители могут нажать, чтобы просмотреть второе место в блоге ниже тега, просто копируя кусок кода, который мы только что создали для первого поста в блоге и вставляем его ниже.Как только это все вставлено, все, что нам нужно сделать, это изменить все «1» на «2.»

Шаг 5: Добавьте область, в которой ваши зрители могут нажать, чтобы просмотреть ваш третий пункт блога ниже тегов, еще раз, копируя кусок кода, который мы только что создали для первого поста в блоге и вставляем его ниже.Как только это все вставлено, все, что нам нужно сделать, это изменить все «1» на «3.»

Сообщение в блоге 1 Заголовок

Здесь вы можете разместить краткий обзор сообщения в блоге, если хотите.

Читать сообщение в блоге

Шаг 6: Теперь мы готовы добавить нижний колонтитул под тегом.Мы сделаем это простым сейчас и кукла его позже.

Спасибо, что посетили этот блог-сайт!

Шаг 7: Я упоминал ранее, что мы моделируем этот веб-сайт для ведения блогов по образцу веб-сайта для блогов Hostwinds. Обратите внимание, когда вы посетите https://www.hostwinds.com/blog/ И нажимайте на одном из изображений, вы направлены на пост блога, связанного с таким извлеченным изображением. Мы хотим, чтобы зрители нашего ведения блога смогут сделать то же самое, и вы будете удивлены, насколько просто создать этот эффект. Просто (новый кодирующий термин придет :) ГНЕЗДО Теги для каждого изготовленного изображения между открытым и закрывающим якорным тегом (например, якорные теги, которые мы использовали для нашей навигационной строки и кнопок и кнопок). Мы ссылаемся на нашу документы «BlogPost1.html», «BlogPost2.html» и «blogpost3.html» в наших якореных бирках таким же образом, когда мы сделали, когда мы создали наши кнопки.

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

Мой сайт для ведения блога

Сообщение в блоге 1 Заголовок

Здесь вы можете разместить краткий обзор сообщения в блоге, если хотите.

Читать сообщение в блоге

Спасибо, что посетили этот блог-сайт!

Шаг 8: Дайте себе раунд аплодисментов! Идите вперед и играйте с вашим сайтом немного! Перейдите в свой файл Explorer, щелкните правой кнопкой мыши файл «index.html» и нажмите «Открыть с». Затем, пожалуйста, выберите ваш предпочтительный интернет-браузер (я рекомендую Google Chrome). Попробуйте щелкнуть кнопки «Прочитайте сообщение Blog» и обратите внимание, что они отвезуте вам прямо на соответствующий пост в блоге. Когда вы проверяете свой сайт, щелкните изображения и кнопки, чтобы убедиться, что в вашем коде нет «ошибок» (опечатки AKA или ошибок).

Домашняя страница

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

Счастливый HTML

Оставайтесь на улице для части 2 и держите этот чит-лист, потому что мы вернемся к нему. Оставайтесь настроек для запчастей 3 тоже! О, будет, как говорят дети: «Запчасти на деталях на части» для этого блога серии! Прежде чем мы его узнаем, у нас будет гораздо более сложный сайт, на котором мы можем публиковать блоги. До скорого!

Написано Hostwinds Team  /  Декабрь 21, 2018