Html коды для сайтов: Макеты | htmlbook.ru

Рамки

Заменяет тег в документе фреймов; также могут быть вложены в другие наборы фреймов

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

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

<кадр> Определяет отдельный фрейм - или область - в наборе фреймов

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

Атрибуты кадров

Определяет, какой HTML-документ должен отображаться

Называет фрейм или область, чтобы на них могли нацеливаться другие фреймы.

Определяет левое и правое поля для рамки; должно быть равно или больше чем 1

Определяет верхнее и нижнее поля для фрейма; должно быть равно или больше чем 1

Устанавливает, есть ли у фрейма полоса прокрутки; значение может равняться «да», «нет» или «авто».По умолчанию, как и в обычных документах, установлено значение «Авто».

Запрещает пользователю изменять размер кадра

Формы

Для функциональных форм вам нужно будет запустить скрипт. HTML просто создает видимость формы.

Создает прокручиваемое меню. Размер устанавливает количество элементов меню, видимых перед тем, как вам потребуется прокручивать.

<опция> Выключает каждый пункт меню

Создает раскрывающееся меню

<опция> Выключает каждый пункт меню

</ textarea name> Создает область текстового поля. Столбцы устанавливают ширину; row устанавливает высоту. </p> <p> <input type = "checkbox" name = "NAME"> Создает флажок. Текст следует за тегом. </p> <p> <input type = "radio" name = "NAME" value = "x"> Создает переключатель.Текст следует за тегом </p> <p> <input type = "text" name = "NAME" size = 20> Создает однострочную текстовую область. Размер устанавливает длину в символах. </p> <p> <input type = "submit" value = "NAME"> Создает кнопку "Отправить" </p> <p> <button type = "submit"> Отправить </button> Создает фактическую кнопку, на которую нажимают </p> <p> <input type = "image" border = 0 name = "NAME" src = "name.gif"> Создает кнопку "Отправить" с помощью изображения </p> <p> <input type = "reset"> Создает кнопку сброса </p> <h2><span class="ez-toc-section" id="_HTML-4"> Добавить HTML-код на веб-сайт </span></h2> <p> HostGator стремится упростить перенос вашего сайта на новую учетную запись хостинга.Мы можем передать файлы веб-сайтов, базы данных, скрипты и один бесплатный перенос регистрации домена. </p> <h5><span class="ez-toc-section" id="i-33"> Что дает мне право на бесплатный перевод? </span></h5> <p> HostGator предоставляет бесплатные переводы для новых учетных записей <strong> в течение 30 дней после регистрации </strong>, а также для новых обновленных учетных записей. Для обновленных учетных записей это должно быть межсерверное обновление, чтобы соответствовать требованиям. Обратите внимание, что аккаунты с пониженной версией не имеют права на бесплатные переводы. </p> <p> В зависимости от типа учетной записи, которую вы регистрируете, мы предлагаем разное количество бесплатных переводов.Пожалуйста, обратитесь к таблице ниже, чтобы узнать, что мы включаем в новые пакеты. </p> <p> <strong> Полная передача cPanel </strong> - это количество включенных передач cPanel в cPanel. </p> <p> <strong> Макс. Ручные переводы </strong> - это максимальное количество ручных переводов, включенных в вашу учетную запись. </p> <p> <strong> Всего бесплатных переводов </strong> - это общее количество веб-сайтов, которые мы переместим для вас. </p> <table class="table table-hover"> <thead> <tr> <th> Тип счета </th> <th> Всего бесплатных переводов </th> <th> Переводы через полную cPanel </th> <th> Макс.Ручные переводы </th> </tr> </thead> <tbody> <tr> <td>? Общий </td> <td> 1 </td> <td> 1 ² </td> <td> 1 </td> </tr> <tr> <td>? Торговый посредник </td> <td> 30 </td> <td> 30 ² </td> <td> 30 </td> </tr> <tr> <td>? VPS </td> <td> Без ограничений ¹ </td> <td> Безлимитный ² </td> <td> 10 на уровень VPS </td> </tr> <tr> <td>? Выделенный (базовый) </td> <td> Безлимитный ¹ </td> <td> Безлимитный ² </td> <td> 75 </td> </tr> <tr> <td>? Выделенный (Стандартный, Elite, Pro ) </td> <td> Безлимит ¹ </td> <td> Безлимит ² </td> <td> 100 </td> </tr> </tbody> </table> <p> ¹ Хотя мы можем делать неограниченные переводы cPanel на cPanel для вас, в зависимости от вашей учетной записи, у вас будет ограниченное количество ручных переводов .</p> <p> ² Полная передача cPanel включает все домены, дополнительные домены, поддомены и настройки cPanel. Это также будет включать вашу электронную почту и учетные записи электронной почты. Обратите внимание, что для этого требуется, чтобы генератор резервных копий cPanel вашего старого хоста был активен. </p> <p> Несколько примеров: Учетная запись торгового посредника Aluminium включает до 30 бесплатных переводов. Из этих 30 у вас может быть 20 переводов cPanel на cPanel и 10 переводов вручную, или любая комбинация этих двух, что в сумме составляет 30 или меньше веб-сайтов.Другой пример: профессиональный выделенный сервер включает неограниченное количество передач cPanel на cPanel, это означает, что вы можете перенести 150 сайтов (или даже больше). Кроме того, поскольку общее количество переводов не ограничено, вы можете использовать до 100 переводов вручную. </p> <p> Для получения дополнительной информации, пожалуйста, ознакомьтесь с нашей статьей поддержки переводов, свяжитесь с нашим отделом переводов по адресу transfer@hostgator.com или позвоните по телефону 866.96.GATOR </p> <h2><span class="ez-toc-section" id="_-_HTML_CSS"> Создайте свой первый веб-сайт вручную: основы HTML и CSS (оригинал) | Расшифровка стенограмм Рич Армстронга </span></h2> <p> 1.Введение: Эй. Привет. Меня зовут Рич Армстронг, и я занимаюсь проектированием и созданием веб-сайтов около 10 лет назад. Этот класс посвящен тому, как создать свой собственный веб-сайт с нуля. Я собираюсь научить вас писать собственный HTML и собственный CSS. Возможность писать свой собственный HTML и CSS открывает мир возможностей. Это весело, это вдохновляет, и вы в значительной степени можете создать свой собственный кусок Интернета. Итак, к концу занятия вы создадите свои первые одностраничные веб-сайты, у вас будет базовое понимание HTML и CSS, ваши друзья будут ревновать, ваша мама будет гордиться вами и вы сможете поделиться своим творением в Интернете, что довольно круто, и вы сможете понять это, что может быть даже круче.Так что я надеюсь, что вы взволнованы, потому что я рад научить вас. 2. Этот класс обновлен !: Привет, я очень рад, что вы решили пройти этот курс. Множество студентов взяли его, и они оставили отличные отзывы, создали отличные проекты и задали кучу вопросов. Но я создал этот класс в 2015 году, а это значит, что многое изменилось, работает иначе, чем в этом классе. Я создал новую версию класса, более современную и с лучшим качеством звука и видео. Вы можете продолжить просмотр этого урока.Этот контент по-прежнему супер классный. Но я настоятельно рекомендую проверить новый. Изучение кода на собственном веб-сайте откроет вам двери, приведет вас к новым карьерным путям и даст вам возможность делиться тем, что вы хотите, со всем миром. Посетите эту ссылку, чтобы ознакомиться с новым курсом. 3. Что мы собираемся делать, изучать, делать ?: Что мы собираемся делать? Что будем делать? Мы собираемся сделать одностраничные сайты для вашего любимого мультфильма или героя мультфильмов. Итак, мой - Wreck-It Ralph, и вот три веб-сайта в разных стилях, которые я провел с вами и покажу, как я делаю.Я учу вас использовать Sublime Text. Я учу вас пользоваться Google Chrome. Я учу вас, как использовать GitHub и как делиться своими веб-сайтами и своими веб-творениями. Мы начинаем с малого и легкого, и мы остановились, и я научу вас, как использовать HTML или как писать HTML, как писать CSS и как связывать их вместе. Все визуально рассказано, и я предлагаю простые метафоры того, как все работает. Присоединяйтесь ко мне, и вы узнаете, как создавать сайты своих персонажей. 4. Загрузите эти 3 бесплатных приложения: Чтобы сделать создание веб-сайтов увлекательным и простым, нам понадобятся три вещи.Откройте браузер и найдите что-то под названием Sublime Text 3. Sublime Text 3 - это редактор кода. Загрузите тот, который подходит для вашей операционной системы. Это упростит написание HTML и CSS. Следующее, что нам понадобится, это Google Chrome, ищите его. Google Chrome - это как Internet Explorer или Safari, но в нем есть действительно отличные инструменты для людей, создающих веб-сайты. Я покажу вам, как именно им пользоваться. Загрузите его, и вы будете на правильном пути к пониманию того, как работают и выглядят ваши веб-сайты. Следующее, что нам понадобится, - это GitHub Desktop.Что позволяет нам делать GitHub Desktop или что позволяет нам делать GitHub, так это то, что он позволяет нам хранить код и отслеживать наши изменения в этом коде. Мы будем использовать его для загрузки, хранения и хостинга наших веб-сайтов, а также в качестве инструмента, чтобы поделиться им с другими. Давайте загрузим это. С помощью этих трех приложений мы можем в значительной степени завоевать мир, не весь мир, а мир HTML и CSS. Они будут действительно полезны, это будет весело, и вы многому научитесь. Я собираюсь пропустить время, когда все приложения будут загружены, и покажу вам, как их настроить.Смотрите сейчас. 5. Установите приложения: Мои приложения наконец-то загружены. Теперь все, что нам нужно сделать, это открыть папку Downloads и начать установку этих плохих парней. Во-первых, это возвышенный текст. Давайте откроем этот DMG, если вы на Mac, а в Windows вы, ребята, делаете свое дело. Если вы действительно застряли, дайте мне шанс. Мы просто заходим в папку «Приложения». Если у вас уже есть копия, замените ее, как я. Фантастический. Следующий - Google Chrome. Давайте дважды щелкнем по нему, что-то вроде того. Перетащите их в папку Applications, эта немного больше, это может занять немного больше времени.Опять же, если у вас уже есть копия, замените ее, как я. Следующий - GitHub Desktop. Мы просто перетащим это прямо в папку «Приложения». Вам необходимо установить три вещи. 6. Создайте свою первую веб-страницу и поделитесь ею. Мы скачали эти три приложения. А теперь давайте сделаем сайт. Мы собираемся перейти в нашу папку Applications и искать наше приложение GitHub. Я просто наберу G-I, и я перейду в приложение GitHub Desktop. Давайте откроем это, и вам будет предложено ввести пароль или аутентификацию.Вы пройдете через кучу интересных экранов, и в конечном итоге вы придете к чему-то вроде этого, где вас попросят ввести логин и пароль, которых у вас, вероятно, не будет, поэтому мы собираемся получить его от github.com. Откройте эту ссылку. Вам нужно будет выбрать имя пользователя, ввести свой адрес электронной почты и создать пароль, а затем зарегистрироваться. Если у вас уже есть учетная запись, как у меня, вы можете войти в систему. Мое имя пользователя - mrra-screencast, и мой пароль является секретом. После того, как вы вошли в систему или зарегистрировались, вы попадете на экран, который выглядит следующим образом.Однако очень важно подтвердить свою учетную запись GitHub в Gmail или почтовом приложении, где бы то ни было. Без проверки вы не сможете правильно разместить страницы. Это создает новый репозиторий, что похоже на создание нового проекта. Назовем его мультипликационным героем или героем. Я бы предпочел героя. Описание, мой первый сайт или, скажем, сайт про моего героя мультфильма. Давайте сделаем его общедоступным, чтобы люди могли его просматривать, чтобы люди могли копировать код, если захотят. Давайте инициализируем его с помощью README, но не будем об этом говорить, поэтому я бы предпочел включить его и создать ваш репозиторий.Что нам нужно сделать в первую очередь, я знаю, что видеть всю эту информацию, все эти ссылки действительно ошеломляюще, - это просто щелкнуть это раскрывающееся меню, ввести gh-pages и создать новую ветку под названием gh-pages. Либо нажмите «Enter», либо нажмите эту ссылку. Это создает новые страницы, и это специальная ветка, где мы действительно можем разместить наш веб-сайт. Это шаг 1. Шаг 2 - это переход к приложению GitHub Desktop и повторный вход в систему. Запомните свое имя пользователя. Пригодится только сейчас. Войдите в систему, и с этого момента вы будете входить в систему как этот пользователь, пока не выйдете снова.Закроем это окно. Теперь нам нужно получить этот проект с GitHub. Вот оно. Я собираюсь клонировать его на свой локальный компьютер. Я собираюсь выбрать рабочий стол в качестве каталога моего проекта и вуаля. Затем выберите cartoon-hero и убедитесь, что вы работаете над веткой gh-pages. Это очень важно. Мы собираемся создать веб-сайт, поэтому мы хотим, чтобы это была страница GitHub. Это первая часть истории GitHub. Что нам нужно сделать дальше, так это поискать Sublime Text.В папке «Приложения» я просто найду или наберу S-U, чтобы открыть Sublime. Давайте откроем это, а затем просто продолжим пока что. Введите h2 My first website и снова h2. Вы заметите, что я оборачиваю h2 знаком «меньше» и «больше», а закрываю его знаком «меньше», «косой чертой» и «больше». Выглядит не слишком примечательно. Но вы увидите, что как только я сохраню его в своей папке как файл HTML, я просто сохраню его как test.html. Вы увидите этот цвет.На самом деле он начинает раскрашивать мой файл. Что он также делает, так это то, что он начинает давать мне предложения о том, что писать, и он также завершает за меня кучу кода. Если я сейчас нажму «Enter», вы увидите, что это довольно много для меня работы, и мне не нужно запоминать всех этих забавных персонажей. Здесь я скажу, что мой любимый цвет красный. Фантастический. Сохраним это. Следующее, что мы можем сделать, это поискать Google Chrome. Я собираюсь набрать G-O в папке «Приложения» и открыть Google Chrome.Он спросит меня, хочу ли я установить его в качестве браузера по умолчанию. Я скажу да, пожалуйста. Mac будет немного осторожнее, и я скажу да, используйте Google Chrome. Затем у нас установлены Google Chrome, Sublime Text и GitHub Desktop, и мы их используем. Я просто собираюсь перетащить их немного влево, чтобы они оставались в моей панели внизу, даже когда они закрыты. В окне Finder я перейду на рабочий стол, открою папку с мультипликационным героем и перетащу файл test.html в Google Chrome, и это будет мой первый веб-сайт.Теперь я хочу поделиться этим с остальным миром. Я захожу на рабочий стол GitHub. Я вижу одно незафиксированное изменение, test.html. Это означает, что он замечает изменение. Теперь я хочу сказать «да», зафиксировать это изменение, потому что я фактически закончил работу над этим небольшим фрагментом и собираюсь сказать, что создал свой первый тестовый файл. Если хотите, можете дать описание. Ваше резюме и описание действительно полезны, когда вы работаете над множеством изменений и работаете с командами, поэтому вы можете сказать, что это именно то, что я изменил, и поэтому я изменил это.Затем вы фиксируете gh-pages, которые фиксируют его в ваших локальных проектах на вашем компьютере. Теперь, чтобы подключить его к сети, вы действительно хотите его синхронизировать. Это действительно полезно. Это означает, что вы можете сохранить кучу изменений на своем компьютере, а затем, когда вы закончите, вы можете отправить все это на GitHub онлайн. Итак, мы идем. Следующее, что нам нужно, это перейти в Chrome, создать новую вкладку и запомнить свое имя пользователя GitHub. У меня был mrra-screencast, и теперь вам нужно перейти на.github.io/ название вашего проекта, так что cartoon-hero / test.html. Нажмите Ввод." Произошла ошибка. Давайте прочитаем. В нем нет выбранного файла. Это потому, что я неправильно написал. Давайте на самом деле пишем правильно, test.html. Итак, мы идем. Вы можете поделиться этим URL с кем угодно. Но теперь я действительно хочу, чтобы мой красный был красным. Вот где он становится действительно мощным. Вернитесь в Sublime Text, и мы собираемся набрать span, а не spam, и вы увидите, как это снова завершилось. Фантастический. Мы собираемся дать этому элементы и атрибуты. Итак, мы идем. Я собираюсь его спасти.Теперь вы увидите это в Chrome. Я собираюсь вернуться к нашему локальному файлу, вы увидите, что есть файл, и вы увидите, что онлайн-файл - это наше имя пользователя. Я собираюсь обновить его, и вы увидите, что мой любимый цвет красный только что появился. Теперь, как мы снова подключим это к сети? Перейдите на рабочий стол GitHub, и вы увидите, что он претерпел некоторые изменения. Вы увидите, что есть связка красной текстуры и связка зеленого. Это говорит о том, что красный уходит, а зеленый приходит.Фантастический. Убедитесь, что вы делаете привязку к gh-страницам, и тогда мы скажем, вставьте промежуток. Мой красный теперь красный. Вы можете изменить свой тестовый файл по своему усмотрению. Экспериментируйте, получайте удовольствие. Вставляйте все, что хотите. Затем я говорю, что нужно перейти к gh-страницам. Я делаю быструю синхронизацию, чтобы убедиться, что он попадает на github.com. Как только синхронизация завершится, я подожду еще немного, прежде чем GitHub приступит к работе. Затем я перейду на вторую вкладку и обновлюсь. Если ничего не появляется, может потребоваться немного больше времени, чтобы что-то действительно произошло.Я делаю еще одно обновление и еще одно. Может быть, это происходит не очень быстро, но со временем он станет красным. Если на самом деле ничего не происходит, перейдите в Safari и перейдите на страницу фиксации, где вы увидите, что что-то произошло, вставьте промежуток. На самом деле это произошло. Вернитесь в Google Chrome и обновите страницу, и вы увидите, что там написано, что мой любимый цвет - красный. Иногда на это требуется время. Иногда нужно просто немного подождать. Итак, мы идем. Ваш самый первый сайт. 7. Теория HTML-боксов (простая, обещаю): Хорошо, а что такое HTML? По сути, HTML - это язык, который люди пишут и понимают браузеры, это язык для отображения информации.Но что это? Я не понимаю. Да, очень хороший вопрос. HTML на самом деле представляет собой набор ящиков, ящиков внутри ящиков, внутри ящиков, внутри ящиков. Главное окно - это на самом деле ваш браузер. Внутри любого данного поля у вас может быть либо другое поле HTML, либо текст, либо ничего. Так что действительно есть три варианта для каждой коробки. Некоторые блоки невидимы, и каждое поле имеет разное предназначение, и каждое поле по умолчанию отображается по-разному в браузере, это довольно мощно. Таким образом, по умолчанию высота большинства ящиков равна высоте их содержимого, другие ящики имеют такую ​​же высоту и ширину, как и их содержимое.Большинству ящиков нравится располагаться как можно левее и как можно выше. Так что же такое поле HTML? Классная аналогия, классная метафора, но мы не понимаем. Позвольте мне вам это объяснить. Каждое поле HTML или большинство из них имеет открывающий тег, закрывающий тег и содержимое. Помните, что содержимое может быть текстом, пустым или пустым, либо внутри него могут быть другие элементы HTML. Открывающий тег имеет меньше или меньше символа. У него есть имя тега, а затем он имеет символ "больше", то есть ваш открывающий тег.Закрывающий тег имеет символ «меньше» и косую черту, имя тега, а затем символ «больше», то есть закрывающий тег. Теперь весь HTML-элемент имеет открывающий тег, содержимое и закрывающий тег. Что действительно круто в элементах HTML, так это то, что они могут иметь эти секретные маленькие кусочки, называемые атрибутами, которые браузер может понять. Так же, как, например, тег ссылки или тег привязки, который является именем тега a, он имеет разные атрибуты. Одним из них может быть href, URL-адрес, на который должна переходить ссылка.Вы также можете узнать, как открыть ссылку в качестве целей. У вас также может быть атрибут title, который сообщает браузеру, когда пользователь наводит курсор на него в течение небольшого периода времени, что мы должны отображать? Итак, это некоторые основные атрибуты, которые вы можете добавить в тег ссылки. Это теория HTML для вас. 8. Начните писать свой собственный HTML: хватит теории. Давай сделаем кое-что. Перетащите мультфильм сюда в Sublime Text и давайте начнем писать HTML. Еще одна теория, я просто буду следовать ей. Пока мы не сохраним его как HTML-файл, у вас не будет крутого автозавершения кода.Сохраните его в папке с героем мультфильма как elements.html. Итак, мы идем. Теперь вы говорите, что есть некоторая раскраска кода. Также есть автозавершение кода h3. Заголовок 2. Сделаем абзац. Это мой первый абзац. У нас есть некоторые элементы, есть готовый по умолчанию и базовый, называемый тегом div. Это ваша основная коробка, и в нее чаще всего кладут больше коробок. На самом деле мы можем просто и дальше складывать коробки внутри коробок. В конце концов вам нужно что-то положить внутрь чего-то. Я собираюсь поставить здесь метку.Теперь тег - это ссылка или якорь. У него есть специальный атрибут href, внутри которого вы указываете url. Вы говорите браузеру, что если пользователь нажимает на это, куда мы должны идти? Вы что-то туда кладете. Пойдем и поставим http.skillshare.com. Его содержание должно быть таким, посетите веб-сайт по обмену навыками. Фантастический. Сохраним. Теперь щелкните правой кнопкой мыши элементы раскрытия и поиска HTML, а затем перетащите их в Google Chrome. Тогда у нас есть кое-что, вы видите, насколько h2 отличается от h3.Заголовок 1, заголовок 2. Он сильно отличается от вашего абзаца и сильно отличается от вашей ссылки, которая подчеркнута и окрашена в фиолетовый цвет, потому что мы посещали ее раньше. Если я нажму на эту, эй, она меня куда-то приведет. Перейти на сайт Skillshare. Это круто. Вернемся к возвышенному, теперь я могу изменить или дать тегу a или элементам a дополнительный атрибут, называемый target, который позволил бы мне установить его значение для подчеркивания пустым. Сохрани это. Что это будет делать, так это то, что он действительно откроется в новой вкладке, что довольно круто.Это означает, что вы можете просто продолжать открывать новые вкладки, новые вкладки и новые вкладки и в конечном итоге добраться до такого количества, что вы даже не знаете, что такое каждая из них. Я отвлекся. Вернемся к Sublime Text, и я покажу вам еще несколько других элементов и их атрибутов. Если мы создадим новый тег абзаца, мы сможем сказать: «Привет!». Но если я хочу сказать: «Привет, меня зовут», то теперь я хочу поместить это в новую строку. Я могу использовать тег br, это перерыв. Теперь вы можете нажать «Enter». Нам не нужно.Но я не собираюсь. Меня зовут Ричард. Сохраним это. Файл, сохранить. Отсюда вы можете это увидеть. На самом деле есть разрыв строки. Это один из специальных тегов. У него нет закрывающего тега. Следующее, что я хотел бы вам показать, - это элементы изображения. Тег изображения также не имеет закрывающего тега. Еще один особенный, еще один нарушитель правил. Если мы введем test.jpg и сохраним, вернемся в Chrome, обновим. Вы увидите, что это неработающая ссылка на изображение. Теперь я хочу найти изображение. Мистер.Р.А. Я поищу это. Мистер Р.А., Ричард Армстронг. Я собираюсь поискать изображения. Есть хороший. Теперь я собираюсь щелкнуть правой кнопкой мыши и сохранить изображение как test.jpg. Фантастический. Теперь, когда я обновлюсь, появится мое изображение. Теперь с изображением это действительно здорово, потому что это означает, что вы также можете указать другое. Если я нажму на это, щелкну правой кнопкой мыши и укажу, ну, скопируйте URL-адрес изображения. Это означает, что мне на самом деле не нужно это скачивать. Это означает, что я могу просто скопировать и вставить это в свой исходный код.Когда test.jpg является относительным URL-адресом, он говорит, где я могу найти его локально? Вы также можете вставить абсолютный URL-адрес, который начинается с HTTP или HTTPS: //. Теперь я собираюсь сохранить это и вернуться в свой браузер, обратно в elements.html и обновить. Вы увидите, что у меня появился новый образ. Последнее, что нам нужно сделать для всех HTML-страниц, - это обернуть их в HTML-элемент. Вы все это видите? Это было довольно интенсивно. Я просто собираюсь отредактировать, отменить и все это сделаю сам.Давайте перейдем к HTML. Давайте напишем закрывающий HTML-тег, а затем вырежем его и поместим внизу. Что нам тогда нужно, так это то, что нам нужен тег заголовка и тег тела. Вы видите, что происходит, когда вы закрываете вещи автоматически. Тег тела. Я собираюсь вырезать этот тег тела и поместить его прямо под последним элементом. HTML рекомендует размещать все невидимые элементы внутри тега head. Я покажу вам пример невидимых ящиков и всех ваших визуальных или видимых вещей внутри вашего тега body.Это всего лишь формальность. На самом деле вам не обязательно иметь все это, но для всех браузеров и для того, чтобы все работало очень плавно все время, я очень рекомендую это. С этого момента мы будем этим заниматься. В вашей голове мы можем сделать что-то вроде title, и мы можем фактически изменить заголовок веб-страницы. На данный момент название веб-страницы - elements.html. Я хочу поменять его на что-нибудь другое. В Sublime Text я назову элементы несколькими восклицательными знаками. Сохраните это, обновите.Вы видите, что там написано «элемент» и несколько восклицательных знаков. Вот и все, что касается HTML. Что действительно круто, так это то, что каждый видимый элемент может иметь атрибуты стиля, а внутри атрибута стиля вы можете начать экспериментировать с некоторым CSS. Можно сказать, что цвет синий. Мы также можем сказать подчеркивание оформления текста. Звучит довольно круто. Файл, сохранить. Это похоже на ссылку, хотя мы не можем по ней щелкнуть. Вы можете увидеть, как начать возиться с CSS здесь. 9. Теория CSS (очень кратко): мы научились делать коробки и помещать коробки внутри других коробок, но как сделать так, чтобы эти коробки выглядели красиво? Что ж, здесь на помощь приходит CSS.Что, черт возьми, такое CSS? Это набор стилей, которые можно закрепить с помощью определенных тегов HTML различными способами и способами, но в основном правило CSS содержит список пар ключ и значение. Это означает, что вы можете сказать: цвет такой, цвет фона такой, размер шрифта такой, поля это, отступы это, их много, я не собираюсь сейчас рассматривать их все, так что теория. Давайте вникнем в это. 10. Три способа избавиться от этой CSS-кошки: Давайте теперь займемся CSS. Перетащите папку Cartoon Hero в Sublime Text и давайте создадим новый файл.Сохраним его как style.html. Давайте сохраним его, и я просто напишу HTML-тег, и пусть Sublime выполнит его за меня. Здесь вверху вы увидите немного дополнительной информации. Это нормально. Назовем этот стильный документ. Внутри body я просто собираюсь создать несколько тегов h2, заголовок 1-1. Я скопирую это, а потом вставлю несколько раз. Затем я создам новый - h3. Я назову это Заголовком 2-1, скопирую и вставлю несколько раз.Я просто хочу изменить ситуацию, чтобы вы точно знали, что происходит. Хорошо. Сохраним это. Затем, чтобы придать ему некоторый стиль, мы можем сказать цвет, двоеточие, затем задать цвет, а затем поставить точку с запятой. Затем, если вы хотите изменить размер шрифта, вы можете иметь 90 пикселей, потому что это такой большой h2. Хорошо. Мы сохраняем это. Затем мы щелкаем правой кнопкой мыши стильный HTML-файл «Показать в Finder» и перетаскиваем его в Google Chrome. Вы увидите, что там есть куча элементов. Один из них красный. Но размер шрифта не сильно отличается, и мы называем его размером fon, поэтому давайте изменим его на T.Сохрани это. Вернитесь в Google Chrome. Это большое. Это именно то, что мы хотим. Хорошо. Но теперь я хочу, чтобы все остальные заголовки были точно такими же. Что мы делаем, так это можем скопировать и вставить. Я просто беру Control C или Apple C и вставляю. Хорошо. Вау, это занимает много времени. Файл, Сохранить, и теперь вы это увидите, вау. Заголовок 1 и заголовок 2 выглядят совершенно одинаково, что должно означать поражение, не так ли? На самом деле, я хочу, чтобы все h3 были зелеными, тогда они будут выглядеть по-другому. Теперь, опять же, вы должны изменить одно.Измените их все. Это немного запутывается и занимает очень много времени, но выполняет свою работу. Хорошо. Но есть способ получше. Вместо использования атрибута стиля в элементе HTML внутри элементов заголовка мы собираемся создать тег стиля. Sublime завершит это за вас, и внутри вашего тега стиля дважды нажмите «Tab», а затем введите h2. Внутри вашего h2 я просто нажму «Shift» и «Tab», чтобы убрать отступ. Ваш h2, можно сказать, должен быть красного цвета. Хорошо. Теперь я хочу убрать все эти цвета, которые должны быть красными.Фантастический. Файл, Сохранить. Обновить. Итак, мы идем. Теперь вы можете не заметить, насколько это круто, но если бы я хотел изменить их все на оранжевый с правильным написанием, конечно, я мог бы просто ввести одну строку, а затем сохранить, обновить, а затем все три моих элемента будут изменены. Теперь в этом сила CSS, особенно когда вы убираете его из фактических элементов HTML, вы можете начать изменять внешний вид вашего сайта из другого файла, и это изменяет весь ваш сайт, весь ваш сайт, а не только каждый отдельный элемент. .Благодаря этому сделать ваш сайт другим, более стильным и обновить его по-настоящему просто и легко. Хорошо. Уберем и размер шрифта. Давайте его разрежем, и давайте наклеим. Хорошо. Я собираюсь убрать атрибуты стиля всех этих h2s. Вы увидите, что я пока сохранил атрибуты стиля h3s. Хорошо. Я пока не хочу его покупать. Большое спасибо. Я все еще пытаюсь. Даже не знаю, нравится ли мне HTML и CSS. Хорошо. Ваш цвет оранжевый, размер шрифта 90 пикселей. Может быть, ты хочешь заняться чем-нибудь другим.Скажем, оформление текста. Подчеркнем. Итак, мы идем. Файл, Сохранить, Обновить и вуаля. Удивительный. Таким образом, вы можете начать видеть, что наличие одной строки кода может начать соответствовать всему вашему сайту или всем определенным элементам на сайте. Хорошо. Теперь я хочу сделать то же самое с h3s. Мне нужен размер шрифта, а не его вес. Я хочу, чтобы размер шрифта был около 40 пикселей. Так что давайте сохраним это и обновим. Ничего не случилось. Хорошо, но я скажу вам, почему ничего не произошло. Потому что, когда вы пишете стили в атрибуте стиля, они переопределяют стили и тег стиля.Хорошо. Такова природа CSS. Происходит много перезаписей или переопределений. Итак, если это первое, то, что написано первым, и что-то еще после того, как это написано, если у него такое же правило, тогда оно будет отменено. Поэтому, если я скопирую это и вставлю, и я изменю его на 60, значение второго правила переопределит значение первого правила. Точно так же, если это указано в атрибутах стиля, размер шрифта переопределит предыдущие размеры шрифта. Хорошо? Так что это нужно помнить. Я просто воспользуюсь всеми этими стилями, потому что на самом деле они нам не нужны.Нам бы хотелось, чтобы все было внутри таблицы стилей, внутри тега стиля. Хорошо. Но я хочу, чтобы мой цвет был зеленым. Так что давайте сохраним это и посмотрим, что произойдет. Хорошо. Выглядит хорошо. Но как теперь узнать, что мы действительно этого хотим? Как мы узнаем, что это 40? Откуда мы знаем, что это не 60? Как мы узнаем, что к чему? Теперь появляется Google Chrome. Щелкните что-нибудь правой кнопкой мыши. Осмотрите элемент. Вау, вы начнете понимать, что он действительно знает HTML и CSS. Вы можете изучить кучу разных вещей.Итак, что мы можем здесь сделать, так это то, что мы можем пойти и щелкнуть на этом h3 или проверить элемент и увидеть, что размер шрифта равен 60, а размер шрифта раньше был 40, но похоже, что он перезаписывается этим h3. Вы можете увидеть это в строке 15 и строке 12, точно так же. Это действительно очень полезно. Что также действительно полезно, так это то, что вы можете сказать: «Интересно, какого он должен быть размера, потому что 60 - это не совсем то, поэтому мы можем написать ему 50 пикселей, или, может быть, 22 пикселя - это как раз то, что нужно. Вуаля. Вы можете увидеть, как это выглядит, но при обновлении все возвращается в норму.Итак, вернемся сюда. Меняется на 22 и убирается h3. Фантастический. Но что теперь, если я хочу, чтобы некоторые из моих h2 и некоторые из h3 были другого цвета? Вот тут и становится по-настоящему интересно. Итак, я собираюсь сказать класс, новый атрибут, класс. Я собираюсь дать определенным элементам определенный класс. Мы скажем, маленький. Я собираюсь скопировать это и наклеить на некоторые из них. Хорошо. Итак, как, черт возьми, мы просто получаем h2s с классом small и просто получаем h3s с классом small? Что ж, в CSS есть определенный способ сделать это, и это точка и имя класса.Те же правила применяются к именам классов. Скажем, размер шрифта 12 пикселей и сохраните это. Вы увидите, что некоторые элементы действительно маленькие. Вы начнете видеть, что один маленький, тот маленький, тот маленький, потому что все они относятся к классу малых. Это действительно круто. Дело в том, что даже если бы нам пришлось переместить небольшой класс над селектором h3, он все равно переопределил бы его. Вы можете посмотреть здесь. Таким образом, вы можете ожидать, что, поскольку маленький был первым, а h3 - вторым, этот размер шрифта переопределил бы этот размер шрифта.Но что еще делает CSS, так это то, что он имеет веса. Таким образом, имя тега имеет меньший вес, чем имя класса. Точно так же что-то с идентификатором first имеет еще больший вес, чем имя класса, и больший вес, чем имя тега. Итак, если мы поместим размер шрифта 150 пикселей на первый элемент или элемент с идентификатором first, у вас будет 150 пикселей. Но что такое ID? Что ж, идентификатор - это почти как класс, за исключением того, что он может быть только в одном элементе. Таким образом, только один элемент может иметь идентификатор first. Хорошо? Это наш большой заголовок с первым, и вы можете видеть, что, хотя он выше по странице, чем другие правила, предпочтение отдано ему, потому что это идентификатор.Даже в этом случае, если мы хотим разместить здесь атрибут стиля и изменить размер шрифта на «Я не знаю», давайте изменим его на 20 пикселей. Файл, сохранить. Вы увидите, что встроенный стиль атрибута стиля имеет приоритет над идентификатором. Итак, при укладке нужно учитывать различные веса. Следующее, что нам нужно рассмотреть, это что произойдет, если я захочу настроить таргетинг на что-то еще внутри элемента? Если здесь есть промежуток внутри промежутка, я говорю: «Попробуй меня». Снаружи у меня также есть надпись: «Попробуйте меня."Давайте сохраним это и посмотрим, что произойдет. Первый диапазон, я просто собираюсь осмотреть этот элемент, говорит" попробуй меня ", но он зеленый, как h3. Вы видите, что делает диапазон, он наследует родительский контейнер или родительский Коробки стили. Так же, как я собираюсь осмотреть этого парня и осмотреть его приятеля. Извините. Он наследуется от контейнера body, потому что это его родители. Видите ли, промежутки довольно умны по умолчанию. Но теперь я хочу сделать все промежутки курсивом Итак, давайте попробуем. Теперь у меня здесь CSS, просто введите span и скажите, что это могут быть шрифты?Стиль шрифта, курсив. Итак, мы идем. Сохраним и вуаля, курсив. Но что произойдет, если я захочу, чтобы только этот диапазон что-то делал? Что ж, мы могли бы присвоить ему имя класса, на которое мы надеемся, или что мы могли бы сделать, так это сказать h3 span, что означает диапазон или все промежутки внутри всех h3s, давайте что-нибудь сделаем. Что нам следует сделать? Мы могли бы задать цвет фона, мы могли бы зачеркнуть. Давайте сделаем это. Стиль шрифта, семейство шрифтов, нет. Оформление текста? Да. Мы можем нанести удар. Орфография ужасная. Зачеркнутый, но выглядит не очень красиво.Может быть, есть тире. Кто знает? Посмотрим. Файл, сохранить, обновить. На самом деле ничего не выглядит слишком хорошо. Теперь возможности Google действительно полезны, когда дело доходит до CSS и HTML, потому что вся сеть построена на HTML и CSS. Давайте быстро проведем зачеркивание CSS в Google. Итак, мы идем. Есть несколько действительно полезных веб-сайтов. Свойство оформления текста, сквозное. Здесь много разной информации, но давайте скопируем это. Посмотрим, работает ли это. Линия, проходящая через. Теперь давайте вернемся сюда и обновим, поехали.У меня есть зачеркнутый или сквозной проход, как они его называют, и более того, он у меня только в h3. Я хотел бы вам показать еще кое-что. Как видите, мои стили растут, несмотря на то, что у меня не так много CSS, и хотя мы не так много стилизовали нашу страницу. Лучший способ стилизовать вещи - это создать отдельный файл таблицы стилей. Что мы собираемся сделать, так это создать тег ссылки и возвышенный текст. Просто закажите готовую комплектацию. Ну, это таблицы стилей, это таблицы стилей типа CSS, а HREF означает, что это черт возьми? Мы просто скажем, что он находится в папке CSS и называется test.css. Теперь я собираюсь вырезать все это. Я собираюсь удалить эти теги стиля, а затем сохраню. Теперь я скажу файл, новый файл. Я собираюсь вставить его и сказать «файл, сохранить как создать новую папку с именем CSS», а затем я назову ее test.css и сохраню. Затем добавим отступ, сказав shift-tab, чтобы он был аккуратным и аккуратным. Сохрани это. Зайдите в Google Chrome, обновите. Ничего не изменилось, но это хорошо. Чтобы убедиться, что все работает, я собираюсь добавить новое правило и применить его к телу.Тело я скажу цвет фона. Просим светло-серый. Сохраните, обновите, он светло-серый. Это действительно здорово, потому что это означает, что мы можем написать кучу CSS, не усложняя наш HTML-файл. У нас есть только одна строка, относящаяся к файлу test.css. Фантастический. Это HTML и CSS для вас. Мы узнаем кучу больше по мере создания нашего проекта, но пока, если вы хотите синхронизировать это с Интернетом и поделиться этим с друзьями и поделиться своими экспериментами, создайте новые файлы, новые папки, новый HTML, новый CSS, Действуй.Есть множество ссылок на CSS. Надеюсь, стражи - это куча ссылок на HTML. Надеюсь, вы можете ссылаться на все элементы HTML, все элементы CSS в предоставленных ресурсах. Что мы хотим здесь сделать, так это просто убедиться, что мы находимся в ветке gh-pages. Затем мы собираемся подтвердить, что сделали кучу вещей или все, что вы хотите. Перейдите на gh- страницы. Фантастический. Синхронизировать. После синхронизации мы действительно можем открыть Google Chrome. Откройте новую вкладку, а затем перейдите на GitHub и войдите в систему.Так что запомните свое имя пользователя. У меня есть мрра-скринкаст. Запомните свой пароль, войдите в систему. Перейдите в каталог или репозиторий cartoon-hero, нажмите на тот, который фиксируется. Вы увидите, что есть начальная фиксация. Прохладный. Но теперь вам нужно перейти в ветку gh-pages. Вы увидите, что мы сделали кучу всего. Теперь, когда вы знаете, что коммиты выполняются, давайте откроем новую вкладку. Я скажу: mrra-screencast.github.io/cartoon-hero/stylish.html Посмотрим. Итак, мы идем. Мы можем поделиться нашим красивым веб-сайтом с остальным миром.Развлекайся, играй, делай сумасшедшие вещи. Делитесь ссылками в галерее проектов, отзывайте о чужих кодах, отвечайте на вопросы, задавайте вопросы, сходите с ума, веселитесь. 11. Планирование в первую очередь :): Хорошо. Теперь мы собираемся приступить к планированию нашего сайта, и планирование может принимать любую форму, которая вам нравится. Это может произойти перед этапом и после этапа, перед другим этапом. Не существует такой вещи, как планирование один раз, а затем никогда не планировать снова на протяжении всего проектирования и разработки сайта.Вам нужно заранее планировать все, что вы делаете. Планирование потрясающее. Один из способов, который я люблю планировать, - это в первую очередь сделать быстрый набросок сайта, если я его еще не разработал. После того, как я его спроектировал, мне нравится делать каркас, а это не типичный каркас того, как выглядит сайт? Как это работает? Но каркас ярлыка коробки, показывающий, как все эти коробки будут соответствовать друг другу на веб-сайте или на странице? Позвольте мне рассказать вам о моем персонаже на сайте и о том, как я разложил все блоки.Прежде всего, это моя страница, которая представляет собой одну большую коробку. Я хочу поле заголовка, а внутри него - поле с изображением профиля. Я хочу, чтобы он был круглым, и поставил крестик в рамке, чтобы обозначить, что это изображение. Следующий элемент - это заголовок, который все еще находится внутри заголовка, и это будет имя моего персонажа, и, возможно, там может быть подзаголовок. Но пока это только заголовок. Следующее, что находится внутри контента, я бы действительно хотел, чтобы там был другой заголовок, и, возможно, это могло бы сказать о моем персонаже.Затем будет тег абзаца с кучей копий, кучей текстов над моим персонажем. Следующее, еще один заголовок, и это может быть что-то вроде любимых слов моего персонажа или любимых друзей моего персонажа. Что я собираюсь сделать, так это поместить его в упорядоченный список, и внутри этого упорядоченного списка будет множество элементов списка. После этого я собираюсь поместить изображение, и вы снова увидите большой крест, обозначающий изображение. Под ним будет небольшой заголовок, а затем под ним еще один заголовок с неупорядоченным списком с кучей элементов списка.В этом списке могут быть любимые дела, или снова друзья, или характеристики, или целая куча разных вещей, которые вы можете поместить в списки. После этого я просто добавлю небольшой нижний колонтитул, а внутри этого нижнего колонтитула я скажу, что это тот, кто создал веб-сайт, здесь вы можете найти меня и любую другую небольшую информацию, которую мои пользователи могут захотеть искать. Это то, что я делаю для всех веб-сайтов, от дизайна до HTML и CSS. Это действительно хороший процесс, действительно хорошая часть планирования. Когда я могу сказать, как все это складывается в коробки? Вы делаете то же самое для своего веб-сайта, вы можете скопировать мой или придумать несколько собственных идей.Но действительно хорошо подумать о том, как все это складывается в коробки и какие коробки помещаются в какие коробки. 12. Давайте напишем HTML нашего сайта: Давайте напишем наш HTML для этого проекта. Давайте откроем папку с мультипликационным героем и перетащим его в Sublime Text, и первое, что мы сделаем, это создадим новый файл и сохраним его как index.html внутри нашей папки с мультипликационным героем. Причина, по которой мы называем его index.html, заключается в том, что когда браузер переходит на веб-сайт, ему нужно знать, какой файл не должен загружаться первым, и он всегда ищет ваш индексный файл.Следующее, что мы собираемся сделать, это написать тег HTML и позволить Sublime Text заполнить остальное. Мы собираемся удалить этот символ меньше, чем тогда, мы собираемся начать писать наш HTML. Итак, мой персонаж - Wreck-It Ральф. Он мне очень нравится. Кем бы ни был ваш персонаж, это может быть мультипликационный персонаж, анимированный персонаж, но если вам это не нравится, выберите персонажа из фильма или выберите кого-то еще, чтобы сделать это, это значительно упрощает и веселее. Следующее, что мы собираемся сделать, это вставить элемент ссылки, и Sublime Text знает, что это отличный CSS1, поэтому мы скажем css / hero.css, чтобы он знал, где его найти. Я хотел бы сохранить на случай, если компьютер выйдет из строя или случится что-то плохое. Это наша голова. Теперь я буду ссылаться на мою коробку-каркас здесь и там. Посмотрим, что мне нужно сделать. В первую очередь мне нужен элемент заголовка, поэтому позвольте мне ввести мой элемент заголовка, а внутри элемента заголовка мне нужно изображение, которое является изображением нашего профиля и заголовком. Давайте сделаем мой тег изображения, и моим источником будет img / profile.jpg, а затем под ним я создам тег h2 и назову его Wreck-It Ralph.Фантастический. Это мой заголовок, но теперь вы увидите мой каркас, что у меня действительно есть внешний контейнер, и это не браузер, это на самом деле оболочка. Я собираюсь создать новый, называемый оболочкой, или новый div с классом оболочки, и он будет обертывать весь мой контент. Следующее, что мы собираемся сделать, это создать div с классом контента, и внутрь я собираюсь поместить весь свой контент. Следующее - это нижний колонтитул, и хотя в моем предварительном просмотре или в моем каркасе нет настоящего поля для нижнего колонтитула и нет настоящего поля для контента, я решил, что мне следует вставить их.Каркас не обязательно должен быть супербетонным, он просто помогает вам в планировании. Итак, следующий элемент, который я собираюсь поместить, - это нижний колонтитул. Теперь внутри моего контента мне нужно создать h3 для этого заголовка или этого заголовка, мне нужно создать тег ap, еще один h3, упорядоченный список с кучей элементов списка внутри изображения, ap с класс заголовка, другой заголовок, неупорядоченный список с некоторыми элементами списка внутри и внутри нижнего колонтитула, мне нужно создать несколько элементов, которые я буду использовать для создания списка.Итак, приступим к написанию. Первое, что я хочу здесь сделать, это написать о Ральфе, и я выбираю h3, потому что на странице уже есть h2, поэтому они не так важны, как h2, но они довольно важны. Следующим шагом будет p-тег, и внутри этого p-тега я напишу немного о Ральфе, о 8-битном плохом парне из видеоигр, который путешествует по аркаде, чтобы доказать, что он хороший парень. У него также огромные руки. Мы можем принять это с расчетом. Следующее, что я хочу сделать, это написать о характеристиках Ральфа.здесь я собираюсь использовать ол, а внутри ол, мы собираемся создать несколько элементов списка. Во-первых, он супер крутой. Следующий пункт списка, с ним обращаются как с хулиганом, крутым. В следующем, он дружелюбен к игровым персонажам с умными девушками. Это не началось так, но так и закончилось. После нашего старого или упорядоченного списка у нас будет большое изображение, поэтому я собираюсь дать этому изображению класс большого изображения. В этом есть смысл, правда? Источник изображения также будет big-image.jpg. После этого мы получим букву p, и я дам ему классную подпись, и в этой подписи будет сказано, что это Ральф в действии.После этого я собираюсь создать еще один h3 и сказать, что друзья Ральфа написали правильно, конечно. Здесь я буду использовать неупорядоченный список. Он создает несколько элементов списка. Я просто скопирую и вставлю это. Здесь я найду нескольких его друзей. Первый - Джейк из «Время приключений». Следующий - Блу из Фостерс. Это дом Фостера для воображаемых друзей. Следующий - Артур из «Бедствий короля Артура». Теперь я собираюсь быстро найти несколько ссылок для этих трех парней в Google Chrome.Давайте наберем Джейк из «Времени приключений». Пройдет немного, и да, это то, что я нашел ранее. Я собираюсь скопировать это и создать ссылку на Джейка. Href будет таким, цели будут подчеркнуты пустыми, а заголовком будет страница «Посетить Джейк». Я собираюсь сделать то же самое с Блу. Найдите Boo Fosters Home, Chrome. Вот тот, который я нашел ранее. Давайте скопируем это снова. Здесь давайте создадим ссылку вокруг Blue. Это будет href, который я только что скопировал.Цель будет пустым подчеркиванием, а заголовком будет страница «Посетить Блоо». Следующим будет Артур. Давайте сделаем то же самое для Артура, давайте создадим связь вокруг него. Снова с href, пустым подчеркиванием и заголовком страницы «Посетите Артура». Теперь нам нужно найти ссылку на Артура. Я люблю Google и [неразборчиво]. Вот и все. Давайте скопируем это снова. Вернитесь к Sublime Text и вставьте его в href. Это в значительной степени наш контент. Теперь, в нашем нижнем колонтитуле, нам просто нужно несколько мелочей.Я собираюсь снова использовать неупорядоченный список с несколькими элементами списка, мы перечислим элементы, я скажу, Made by Rich. Затем следующий пункт списка, я скажу, «Сделано на уроке Skillshare». Затем, наконец, я собираюсь сказать, что этот элемент списка должен быть защищен авторским правом, хотя у меня нет права на него авторское право, он должен быть и / или копировать точку с запятой с амперсандом 2015. Теперь это особый способ написания ваших авторских прав символ. Я собираюсь разместить ссылку на Skillshare, а затем я начну заполнять все эти детали.Это мои сайты. Опять же, цель должна быть пустой подчеркиванием, а заголовок должен быть «Посетите веб-сайт Рича». Я просто скопирую и вставлю все это, чтобы облегчить задачу Skillshare. Для веб-сайтов Skillshare href будет Skillshare.com. Это в значительной степени наш HTML, но нам нужно убедиться, что он работает. Зайдите в наш искатель, перетащите index.html в Google Chrome, и он должен быть примерно таким. Нам нужно найти два изображения. Саймон ищет Wreck-it Ральфа.Я собираюсь перейти на вкладку изображений. Есть один действительно супер крутой, который мне нравится. Это он. Я собираюсь использовать это из изображения нашего профиля. Я пойду к герою мультфильма. Я собираюсь создать новую папку для всех своих изображений. Замечательно хранить ваш CSS в папке CSS, а все изображения - в папке изображений. Я назову это profile.jpg. Фантастический. Следующее, что я собираюсь сделать, это поискать действительно крутое большое изображение. Это может быть неплохо. Можем мы просто посмотреть, есть ли еще что-нибудь? Ага, это хорошо.Я просто нажму «Просмотр изображения», и оно загрузится. Пока он загружается, я просто помещу свое тестовое изображение в папку изображений, и я оставлю одно окно-каркас вверху только потому, что оно на самом деле не является частью сайта, это больше того, на что можно ссылаться. Здесь я собираюсь сохранить изображение как big-image.jpg. Фантастический. Посмотрим, что теперь будет. У нас есть изображение нашего профиля, у нас есть большое изображение. Он действительно очень большой, и это наш HTML. Отсюда мы действительно можем начать удивительным образом стилизовать это искусство.С его помощью мы можем сделать кучу действительно крутых вещей. Если хотите, откройте GitHub Desktop и синхронизируйте файлы, но я буду делать это только с видео CSS. Прохладный. Увидимся в следующем видео. 13. Давайте напишем CSS нашего сайта (забавная часть): Давайте напишем немного CSS. Откройте папку с мультипликационным героем, перетащите ее в Sublime Text и откройте индексный файл, а также свой hero.css. Что нам нужно сделать, так это стилизовать заголовок и его элементы, нам нужно стилизовать контент и его элементы, и нам нужно стилизовать нижний колонтитул и его элементы.Вы можете либо переключаться между индексом и героем, либо копировать и вставлять, что я люблю делать. Мне нравится говорить «копировать», и мне нравится вставлять, а потом я люблю это комментировать. Комментарий - это то, что браузер не увидит, и вы пишете его так, и это здорово. В HTML вы можете написать комментарий с этим синтаксисом, что действительно круто. Если вы хотите оставить себе какие-нибудь заметки вроде «Эй, зацените это». Вы тоже можете это сделать. Это не доходит до браузера и даже не замечает этого. Мне нравится просто прокомментировать это, а затем ссылаться на него здесь.Мой заголовок. Что я хочу сделать со своим заголовком. Я хочу, чтобы он был сплошным цветом, поэтому я назову цвет фона, я хочу, чтобы он был синим, но я хочу, чтобы он был особенным синим. В Google Chrome я собираюсь открыть новую вкладку и искать палитру цветов. Я обычно просто выращиваю первый вариант и хочу синий. Этот синий выглядит неплохо. Мы изменим размер браузера. Вот этот выглядит хорошо. Я скопирую это. Я собираюсь поставить перед ним хеш и вставить его. Потрясающе, это мой цвет фона.Я хочу, чтобы вокруг элементов внутри заголовка оставалось немного места, поэтому я добавлю ему отступ. Я собираюсь добавить ему отступ, скажем, 40 пикселей. Теперь я мог написать это так: padding-right я мог бы присвоить ему значение. Я мог бы сказать padding-left и padding-top, padding-bottom и padding, что угодно. Но есть ярлык. Если я хочу, чтобы все они были одинаковыми, я просто говорю «заполнение» и присваиваю ему значение. Если я хочу сделать все значения, которые я могу сделать в одной строке. Я могу сказать верхнее значение, затем я могу сказать правое значение, нижнее значение и затем левое значение.Они могут быть разными. Если я хочу, чтобы верх и низ были одинаковыми, а левая и правая были одинаковыми, я могу буквально просто написать это так. Но поскольку я хочу, чтобы все было одинаково, я оставлю 40 пикселей. Следующее, что я хочу сделать, это сказать мой h2. Теперь я мог бы написать это как все h2 в заголовке, но я знаю, что есть только один h2, поэтому я просто буду кратким. Я хочу, чтобы размер шрифта был около 90 пикселей, посмотрим, как он выглядит сейчас, и я хочу, чтобы его цвет был белым.Фантастический. Затем у меня есть это изображение внутри моего заголовка, но я знаю, что есть другое изображение. Здесь я скажу изображение внутри заголовка, и я хотел быть посередине. Я хочу сказать, что мой заголовок, давайте выравниваем текст по центру, и это выровняет мой заголовок и мое изображение. Что еще я хочу, чтобы мое изображение делало? Я хочу, чтобы он был круглым. Я собираюсь задать ему border-radius и 150 пикселей, и посмотрим, что из этого получится. Если вы спросите: «Какого черта. Откуда вы знаете, что это был border-radius?» Что ж, если вы чего-то не знаете, просто погуглите.Это самый простой способ что-то сделать. Если вы погуглите что-то вроде CSS для округлых углов, вы найдете много информации. Перейдите по любой из ссылок, они действительно полезны, они многое объяснят, а затем просто внедрите это на свой сайт. После сохранения перейдите в Google Chrome и обновите. Выглядит неплохо. Вы увидите, что углы делают его не совсем круглым, вы также заметите, что я добавляю кучу дополнительной информации, например, о Ральфе, его характеристиках и его друзьях внизу со ссылками.Если вы этого не сделали, сделайте это. Теперь я хочу, чтобы это было круглым. Осмотрите это. Давайте просто увеличим ширину инспектора. Вы увидите, что когда я наведу курсор на изображение, оно говорит, что оно 450 на 450 пикселей. Есть два способа сделать это. Я мог либо искать средство изменения размера изображения, либо использовать Photoshop или любое другое графическое приложение. PicResize - это круто. Или я мог бы просто оставить все как есть и изменить ширину и высоту. Вот что я собираюсь сделать. Я посмотрю, как это выглядит, и скажу ширину. Давайте возьмем 300 пикселей, потому что 300 пикселей и 150 пикселей идут вместе, так как 150 составляет половину 300.Выглядит хорошо. Я собираюсь реализовать это в моем файле CSS шириной 300 пикселей. Мне не нужно изменять высоту просто потому, что она автоматически изменяется в зависимости от ширины. Я мог изменить высоту и ширину с автоматическим изменением размера с высотой. Я могу исказить вещи и сделать вещи непропорциональными. Если я установлю другую ширину и другую высоту для квадратного изображения. Следующее, что я хочу сделать, это поставить на него рамку. Здесь есть несколько строк, которые вам нужно знать, но так же, как есть ярлык для заполнения, есть большой ярлык для границы.Здесь я хочу сказать, что я хочу, чтобы толщина моей границы составляла 10 пикселей, я хочу, чтобы стиль границы был сплошным, и я хочу, чтобы цвет был красным. Я пойду найду это. Должен быть красным, поэтому я отмечаю это, CC0000 выглядит хорошо. Если я скопирую это, а затем вставлю сюда и сохраню, давайте посмотрим, как это выглядит. Выглядит неплохо и может быть немного толще, поэтому давайте посмотрим, как он будет выглядеть, если он будет немного толще. Я просто нажимаю здесь стрелку вверх. Выглядит неплохо. Двадцать четыре, но тогда, моя ширина, радиус границы неправильный.Итак, я собираюсь изменить свой border-radius, пока он снова не станет хорошо выглядеть. Это выглядит хорошо. Это что? 174. Я просто скопирую все это, потому что это именно то, что я хочу. Фантастический. Тогда я буду экономить. Обновить. Теперь вы увидите, что есть граница, которая отличается от фактической ширины. Моя ширина по-прежнему 300, но моя граница сверху, снизу, слева и справа - 24. В целом моя высота и ширина этого изображения равны 348. Следующее, что я хочу сделать, это изменить весь этот текст на что-нибудь немного более супергерой.Я собираюсь использовать некоторый текст по умолчанию, я собираюсь установить для HTML и основного текста или семейства шрифтов значение Arial, а если у них нет Arial, я скажу без засечек. Если вы не знаете, что такое семейство шрифтов, просто погуглите. Вы найдете кучу информации. Сохраним. Вернуться сюда. Это выглядит немного более супергеройным. Выглядит неплохо. Следующее, что нам нужно сделать, это избавиться от этой белой рамки вокруг всего, а также от атрибутов HTML и body. Давай изменим это. Я хочу сказать обивка.Иногда это может быть обивка. Я собираюсь обнулить это значение. Это стили по умолчанию, которые поставляются с браузером. Это не похоже на заполнение, поэтому я собираюсь добавить маржу. Давайте установим это значение в ноль, уберем отступы. Сохраним это. Вау, я не знаю, что я только что там делал. Что из этого. Новый взгляд на файл. Ух ты. Давайте просто сохраним, убедитесь, что вы закрыли это. Вернемся к Google Chrome, и вуаля, маленькие белые промежутки вокруг всей страницы исчезнут. Это в значительной степени наш заголовок, выглядит действительно хорошо.Выглядит Wreck-It Ральфи. Теперь следующее, что я хочу сделать, это кое-что поработать с нашим контентом. Давайте удалим HTML-заголовок, и теперь мы сможем вернуться к подобному контенту, только по-другому. Этот контент, есть куча h3s, упорядоченные списки, изображения и еще много чего. Первое, что я хочу сделать, это обратиться к элементам контента. Я хочу дать ему максимальную ширину, чтобы он не всегда был таким широким, и я также хочу поместить его посередине. Я могу сказать маржа, ноль для верха и низа, а также для левого и правого.Теперь авто, делает его действительно красивым, он меняет его размер за вас, но только слева и справа. Сохраним это. Давай посмотрим что происходит. Давай закроем это. Вещи выглядят немного странно, правда? Что действительно круто, так это то, что когда это происходит, мы можем проверить и сказать перейти к нашему контенту, скажем, max-width. Давайте пока изменим его на 400. Давайте придадим ему цвет фона, вау, кукурузный шелк, это выглядит хорошо. Пойдем, коралл. Коралл хорошо смотрится. Как видите, это максимальная ширина. Если я увеличу его, вы увидите, что справа и слева равное пространство.Но теперь этот образ творит сумасшедшие вещи. Что я хочу здесь сделать, так это установить большое изображение, .big-image, и я хочу сказать, что максимальная ширина составляет 100 процентов. Я не сдаюсь в абсолютной ценности. Посмотрим, что здесь происходит. Я пока не хочу покупать. Спасибо. Обновить. Вы начнете видеть, что на самом деле это процент. Если вы измените размер своего браузера, он действительно масштабирует его для вас, что отлично подходит для мобильных устройств. Следующее, что я хочу сделать, это добавить к контенту небольшое отступление, чтобы оно не всегда касалось левого и правого.Итак, я хочу сказать, что отступ равен нулю и 20 пикселей. Когда я сохраняю это, я вижу, что слева есть немного белого пространства, а справа - пустое пространство. Но не для моей шапки. Заголовок выглядит идеально. Следующее, что нужно сделать, - это подпись. Что я хотел бы здесь сделать, так это решить эту проблему, и я хочу сделать размер шрифта около 16 пикселей. Я хочу цвет шрифта. Итак, пусть цвет будет светло-серым. Затем я также хочу, чтобы стиль шрифта был курсивным, чтобы он действительно выглядел как заголовок. Сохраним это и посмотрим, как это выглядит.Это Ральф в действии. Это чудесно. Следующее, что я хочу сделать, это просто сделать этот вид немного лучше. Итак, мой ul, мне не нужны эти диски, поэтому я скажу list-style, none, и я также собираюсь дать ему нулевое заполнение и нулевое поле. Давай посмотрим что происходит. Фантастический. Но вы увидите, что ul и нижний колонтитул также изменились, когда я это сделал. Но это нормально. Итак, Джейк из «Времени приключений», Блу из «Фостерс», Артур из «Катастрофы короля Артура». Но эти ссылки выглядят немного странно, поэтому позвольте мне также изменить ссылки.Все ссылки, я на самом деле хочу, чтобы цвет был красным, потому что это цвет Wreck-it Ральфа, и я не хочу, чтобы у них было подчеркивание. Итак, я хочу сказать, что текстовое оформление отсутствует. Сохраним это и посмотрим, как это выглядит. Фантастический. Следующее, что нужно сделать, - это нижний колонтитул. Давайте немного изменим нижний колонтитул. Я хочу, чтобы он был очень-очень светло-серым с небольшим отступом. Скажем, отступ я собирался установить на 40 пикселей и 20 пикселей. Теперь это не совсем похоже на нижний колонтитул, но помните, что это всего лишь руководство.Нижний колонтитул внизу, скажем, мне нужен цвет фона. Итак, каким должен быть цвет фона? Давайте снова выберем цвет. Я бы очень хотел черный, но я сделаю его действительно светлого черного цвета. Итак, попробуем этот цвет. Давайте просто скопируем это, поместим сюда хеш и вставим его. Посмотрим, как это выглядит. Выглядит неплохо, но по-прежнему тесно с остальным контентом. Итак, что я хотел бы сделать, я просто хотел бы установить поле с верхним пределом поля около 20 пикселей. Тогда я также хотел бы немного изменить его ul внутри.Что я хотел бы сделать здесь, так это ul text-align, center. Итак, возьмем центр. Но тогда я также хотел бы сказать, что все li находятся внутри ul, но только внутри нижнего колонтитула, я хотел бы отображать как встроенные. Сейчас он отображается в виде блока. Я могу показать вам это здесь. Если мне нужно осмотреть этот элемент, вы увидите, что на самом деле это целый блок. Это видно по синему цвету выделения. Теперь меняю отображение на встроенный. Я говорю, что li находится внутри ul, внутри нижнего колонтитула отображается как встроенный.Посмотрим, что это делает. Обновить. Сделано Сделано Rich Сделано во время конкурса Skillshare, авторское право 2015. Но это немного сгруппировано, поэтому я собираюсь изменить его на встроенный блок, что означает, что я могу применить к нему маржу. Итак, поле, верх, ноль, левый и правый, я скажу пять пикселей. Я собираюсь сохранить, обновить здесь, и это выглядит неплохо. Это, с другой стороны, посередине. Я не хочу, чтобы это было посередине, поэтому я просто собираюсь поместить ul нижнего колонтитула и просто выравнивать его по тексту, центрировать для ul и нижнего колонтитула и обновлять здесь.Итак, это наш веб-сайт. Теперь поделитесь этим. Не бойтесь, делайте все, что хотите, оформляйте как хотите, а затем делитесь этим. Я думаю, что самое сильное в Интернете - это то, что вы можете им делиться. Вы можете поделиться информацией. Этот способ в значительной степени бесплатный. Теперь то, что я собираюсь сделать, - это показать вам несколько различных способов стилизации. Тот же HTML, только другой CSS. Мы можем вставить туда немного изображений, но в основном это все. После того, как вы создали свой сайт, когда вы будете довольны им, ну, а когда вы будете счастливы поделиться чем-то из этого, перейдите в свое настольное приложение GitHub и убедитесь, что вы находитесь в ветке gh-pages, а затем давайте зафиксируем наши файлы, сказав: «Сначала фиксирует страницу нашего персонажа или веб-сайты».Зафиксируйте это, синхронизируйте. Помните, что нам нужно сделать сейчас, когда синхронизация завершится, мы должны перейти на github.com. В github.com мы должны быть героями, мы должны перейти в раздел коммитов, мы должны убедиться, что мы находимся в ветке gh-pages. Написаны файлы HTML. Посмотрим, что делает GitHub. Он все еще синхронизируется. На это уходит много времени. Интересно, это потому, что у нас там есть большие изображения. Хорошо, поехали. Он синхронизирован, вернемся на github.com. Давайте обновим страницу, и вы увидите «Первая фиксация» для страницы нашего персонажа.Вот так. Теперь мы хотим перейти на mrra-screencast.github.io. Очевидно, используйте свое имя пользователя GitHub. Зайдите в мультипликационный герой, нажмите Enter. Вы увидите, что index.HTML отсутствует, и это потому, что он выбирает index.HTML в качестве вашего первого файла, который нужно получить. Это ваш сайт. Вы можете прочитать его на своем мобильном телефоне, вы можете поделиться им с друзьями. Выглядит неплохо. Итак, мы идем. Потанцуйте, выпейте чаю, похлопайте себя по плечу и скажите маме, что вы только что создали свой первый веб-сайт и можете им поделиться.14. О, насколько универсален CSS! Хорошо, теперь вы можете видеть, на этом мы остановились. У нас были действительно красивые сайты с персонажами. Я написал еще две таблицы стилей. Один называется hero-alt-1, а другой - hero-alt-2. Так что, просто изменив таблицы стилей, давайте сэкономим. Вы видите, что происходит, я не менял HTML. Вы увидите мозаичный фон. Это делается путем установки фонового изображения, это особый синтаксис для перехода к папке вверх. Итак, из всего, что я здесь, я использую один CSS, он идет вверх по папке, а затем он идет и ищет в папке изображения пиксельное изображение 100 JPEG.Затем я установлю повторение фона поверх повторов. Тогда я получаю что-то вроде этого. Вы также заметите техническую тень. Поэтому, если я осмотрю это и просто отключу фоновое изображение, вы заметите, что на этом тексте есть тень, а на самом изображении - тень. Это делается двумя разными способами. У h2 есть техническая тень, и это значение x, это значение y, и это величина размытия. Затем цвет тени. Снова есть тень блока на изображении заголовка. Его значение x, значение y, степень размытия и цвет.Итак, это верхняя часть. Я изменил несколько цветов. Отправил смс, снял номера, потом немного поменял фото и немного. Так что это одна версия. Еще одна версия, просто поменяю на две и сохраню. Посмотрим, что теперь будет. Ух ты. Так что он действительно красный. Да, действительно красный. Он очень плоский. Это квадратное изображение. Никаких теней. У союзников есть границы, и все они округлые прямоугольники. Подписи изменены. Что это? Ну, это ссылки, и у них есть цвет фона, и к ним также применен параметр наведения курсора.Итак, в hero-alt-2 to я покажу вам в тегах A. Есть цвет фона. Затем, когда они наведены, и это называется псевдоклассом, фон меняет цвет. Вот почему я получаю более темный цвет при наведении курсора на ссылку. Могу ли я создать три совершенно разные страницы, просто изменив CSS и полностью исключив HTML? В этом вся сила CSS. Вы можете радикально изменить внешний вид своих веб-сайтов всего несколькими строками кода и изменив файлы CSS. 15. Спасибо, и следующие шаги: Это конец проектов.Я очень надеюсь, что вам было весело, потому что это самое главное. Следующее, что, я действительно надеюсь, вы сделали, это многому научились. Мы рассмотрели HTML, мы рассмотрели CSS, мы рассмотрели, как они соотносятся друг с другом. Мы начали использовать Sublime Text. Мы начали использовать GitHub. Мы использовали Google Chrome и начали проверять элементы. Во всех этих темах есть гораздо больше. Если вам понравилось, узнавайте немного больше каждый день, пишите HTML и CSS каждый день, даже если это всего две строки. Это поможет вашему мозгу оставаться свежим, но, что наиболее важно, делиться своими проектами с другими людьми.Итак, в галерее проектов размещайте ссылки, отвечайте на вопросы, задавайте вопросы и помните, что Google - ваш друг. Интернет создают люди, пишущие HTML и CSS. Весь Интернет основан на HTML и CSS. Это ваш первый порт захода, иначе спросите настоящего человека. Круто, надеюсь, тебе было весело. Мне было весело делать это. Ищите еще несколько видео. </p> <h2><span class="ez-toc-section" id="_HTML_2021_-_HTML"> Изучите HTML бесплатно в [2021] - Основные коды HTML для начинающих </span></h2> <p> Итак, вы не полный ботаник и у вас есть собственный сайт.Или, может быть, вы полный ботаник и просто еще не успели изучить HTML. В любом случае, у вас есть веб-сайт, и он нуждается в некоторых изменениях. Возможно, вы хотите изменить какой-то текст в своей теме WordPress. Возможно, кто-то сделал вас сайтом на чистом HTML, и вам нужно обновить какой-то контент, возможно, отключить изображение. </p> <p> <strong> Что ж, есть хорошие новости: на самом деле все это невероятно просто. Вам не нужно быть программистом или что-то в этом роде. </strong> Хотя HTML (язык гипертекстовой разметки) обычно считается «языком программирования», это не очень мощный язык.Другими словами, HTML сам по себе не может использоваться для выполнения всех задач, которые теоретически могут быть выполнены компьютерами. </p> <p> Добавьте CSS3 и JavaScript, и это станет совершенно другой статьей. Или закажите. Но мы не касаемся этого, потому что вам, вероятно, просто нужно обновить свой веб-сайт изображениями ваших последних сделок. Я хочу упростить для вас это, и HTML тоже. </p> <p> <strong> Я собираюсь провести для начинающих экскурсию по HTML как языку и объяснить, как строятся веб-страницы, самым простым способом.</strong> К концу этой статьи вы сможете понять, что видите, когда посмотрите на код, например, шаблона блога в своей системе управления контентом (CMS). </p> <p> Прежде чем мы перейдем к практическим вопросам, одно небольшое замечание: «веб-мастер» - это то, что люди называли веб-дизайнерами, веб-разработчиками и контент-менеджерами в 90-х годах. Все три из перечисленных ролей обычно исполнял один и тот же человек, и эти люди обычно были такими же огромными ботаниками, как я. </p> <h3> </h3><strong> Основные понятия </strong> </h3> <p> HTML буквально предназначен для того, чтобы сообщить вашему браузеру (например, Chrome или Firefox): «Вот то, что вам нужно показать на экране.Сделай это." То есть <strong> HTML определяет фактическое содержание веб-страницы, на которой вы находитесь. </strong> Он делает это с помощью тегов, которые выглядят так: <p> Это какой-то текст. </p> </p> <p> Эти буквы в скобках? Это теги. Тег «p» конкретно определяет абзац или общий блок текста. Вы также должны заметить, как «закрывающий тег» использует символ «/», чтобы отличать себя от «открывающего тега». Не все теги работают так. Некоторые теги являются единственными, поэтому они «открываются» и «закрываются», например: <noscript><img class="lazy lazy-hidden" src = ”” alt = ””></noscript><img class="lazyload lazy lazy-hidden" src = ”” alt = ””><noscript><img src = ”” alt = ””></noscript> </p> <p> Я перейду к этому позже.Во всяком случае, существует ... ну ... множество тегов, и я не буду разбираться во всех из них. У меня нет ни времени, ни места, и, если вы не планируете стать веб-дизайнером, вам необязательно знать их все. Но <strong> тег «p» (также известный как тег абзаца) очень важен. </strong> </p> <p> <code> ---- </code> </p> <p> <code> <p> Машина Тьюринга - это математическая модель вычислений, которая определяет абстрактную машину, которая манипулирует символами на ленте в соответствии с таблицей правил.Несмотря на простоту модели, для любого компьютерного алгоритма можно построить машину Тьюринга, способную моделировать логику этого алгоритма. </p> <br/> <code> ---- </code> </code> </p> <p> </p> <p> Кроме того, в своей основной форме файл HTML представляет собой простой текстовый файл, имя которого заканчивается на «.html». <strong> На самом деле вы можете создать целый веб-сайт с помощью Блокнота в Windows, хотя есть <em> много текстовых редакторов </em> лучше для этой работы. </strong> </p> <p> Вернуться к тегам: теги могут иметь атрибуты «.Атрибуты используются для множества вещей, например, чтобы один абзац отличался от другого. Обычно это достигается с помощью атрибута class =, например: </p> <p> <code> ---- </code> </p> <p> <code> <p> Это вводный абзац. </p> </code> </p> <p> <code> <p> Это обычный абзац. </p> </code> </p> <p> <code> ---- </code> </p> <p> </p> <p> Теперь вам нужно использовать совершенно другой язык, в частности CSS, чтобы абзац с классом intro-text выглядел по-другому, но это руководство на другой день.Кроме того, существует множество атрибутов, и не каждый атрибут можно использовать с каждым тегом. Опять же, я не собираюсь приводить вам полный список. </p> <h3><span class="ez-toc-section" id="i-34"> Ваша самая первая веб-страница </span></h3> <p> HTML как язык фактически претерпел ряд изменений за последние годы. В настоящее время стандартная версия HTML называется HTML5, хотя вы вряд ли можете назвать ее пятой итерацией как таковой. Это соглашение об именах, рожденное удобством, а брендинг - больше, чем точностью. </p> <p> HTML5 родился из разочарования и гнева ботаников и был предназначен для радикального упрощения процесса написания HTML вручную, а также для облегчения чтения кода как людьми, так и компьютерами.</strong> В частности, он был разработан, чтобы предоставить больше контекста о содержимом на странице. </p> <p> Самая простая HTML5-страница будет выглядеть так: </p> <p> <code> ---- </code> </p> <p> <code> <! DOCTYPE html> </code> </p> <p> <code> <html> </code> </p> <p> <code> <head> </code> </p> <p> <code> <title> Это моя классная веб-страница. </title> </code> </p> <p> <code> </head> </code> </p> <p> <code> <body> </code> </p> <p> </p> <p> <code> </body> </code> </p> <p> <code> </html> </code> </p> <p> <code> ---- </code> </p> <p> Строка «DOCTYPE» в начале сообщает браузеру, что он просматривает веб-страницу HTML5.<strong> Тег «html» используется для указания браузеру, где страница начинается и заканчивается. </strong> Остальное, займемся через минуту. </p> <p> Эта страница, если вы откроете ее в своем веб-браузере, представит вам совершенно пустое окно. Что ж, вы бы увидели «Это моя классная веб-страница». на вкладке вашего браузера, но это все. Это делает тег «title». Вы могли заметить два набора тегов, которые называются «голова» и «тело». Давайте посмотрим на них: </p> <h4><span class="ez-toc-section" id="i-35"> Хорошая голова на плечах </span></h4> <p> Раздел «голова» веб-страницы - это то место, куда вы помещаете всю информацию о самой веб-странице, но <em>, а не </em>, куда вы помещаете контент. .<strong> Единственная часть головы, которую пользователь действительно должен увидеть на своем конце, - это заголовок, </strong>, и он будет находиться не на самой странице, а в пользовательском интерфейсе браузера. </p> <p> Рассмотрим другой пример: </p> <p> <code> ---- </code> </p> <p> <code> <html> </code> </p> <p> <code> <head> </code> </p> <p> <code> <title> Слонов в изобилии! </title> </code> </p> <p> <code> </code> </p> <p> <code> <meta name = "Description" content = "Слон вполне может быть одним из самых симпатичных животных в мире.Узнайте больше о слонах здесь! "> </code> </p> <p> <code> <meta name = "Keywords" content = "слон, млекопитающее, лемуры тоже милые"> </code> </p> <p> <code> </head> </code> </p> <p> <code> </html> </code> </p> <p> <code> ---- </code> </p> <p> Как видите, у этого примера больше, чем заголовок. У него есть тег «ссылка», который используется для сообщения браузеру: «Эй, загрузите и этот файл», и устанавливает связь между двумя файлами. В этом случае он загружает файл CSS, который можно использовать для определения того, как HTML выглядит для пользователя с точки зрения типографики и макета страницы.</p> <p> <strong> Он также имеет два «метатега», которые используются для хранения бит информации о вашей веб-странице, которая используется такими приложениями, как поисковые системы. </strong> У меня есть один с основным описанием страницы, которое отображается на сайтах поисковых систем, когда эта страница появляется в их результатах. Второй метатег определяет ключевые слова, которые будут использоваться поисковой системой для категоризации. </p> <h4><span class="ez-toc-section" id="i-36"> Посмотрите на этот тег тела </span></h4> <p> Тег «body» - это то место, куда вы помещаете весь контент, который пользователи фактически увидят при загрузке вашей страницы.Это может выглядеть так: </p> <p> <code> ---- </code> </p> <p> <code> <html> </code> </p> <p> <code> <head> </code> </p> <p>… </p> <p> <code> </head> </code> </p> <p> <code> <body> </code> </p> <p> <code> <заголовок> </code> </p> <p> <code> <h2><span class="ez-toc-section" id="i-37"> Слонов в изобилии! </span></h2> </code> </p> <p> <code> </header> </code> </p> <p> </p> <p> <code> <раздел> </code> </p> <p> <code> <p> Вот текст про слонов! </p> </code> </p> <p> <code> </section> </code> </p> <p> </p> <p> <code> <нижний колонтитул> Авторские права и копия; Слонов в изобилии !, 2467 </footer> </code> </p> <p> <code> </body> </code> </p> <p> <code> </html> </code> </p> <p> <code> ---- </code> </p> <p> </p> <p> И да, заголовок сильно отличается от заголовка.«Мы поговорим об этом позже. </p> <h3> </h3><strong> Получите здесь свои основные теги содержимого </strong> </h3> <p> Так что это может быть самый важный раздел для вас, читатель. <strong> Здесь вы узнаете, как изменить свой контент, не нарушая его. </strong> Итак, мы уже рассмотрели, что делает тег «p», поэтому я пропущу его. Давайте перейдем к остальному вашему основному контенту и параметрам форматирования: </p> <h4> </h4><strong> Сделайте ваш сайт более легким для чтения с заголовками и подзаголовками </strong> </h4> <p> Заголовки - это большие фрагменты текста, которые разделяют абзацы меньшего текста, чтобы вы могли бегло просмотреть статью легче.Для определения заголовков и подзаголовков можно использовать шесть тегов: </p> <p> <code> ---- </code> </p> <p> <code> <h2><span class="ez-toc-section" id="_1"> Это заголовок уровня 1 </span></h2> </code> </p> <p> <code> <h3><span class="ez-toc-section" id="_2"> Это заголовок 2 уровня </span></h3> </code> </p> <p> <code> <h4><span class="ez-toc-section" id="_3"> Это заголовок 3 уровня </span></h4> </code> </p> <p> <code> <h5><span class="ez-toc-section" id="i-38"> Это заголовок четвертого уровня </span></h5> </code> </p> <p> <code> <h5><span class="ez-toc-section" id="_5"> Это заголовок 5 уровня </span></h5> </code> </p> <p> <code> <h6><span class="ez-toc-section" id="_6"> Это заголовок 6 уровня </span></h6> </code> </p> <p> <code> ---- </code> </p> <p> </p> <p> Следует отметить, что теги «h2» - это самые большие заголовки самого высокого уровня, а теги «h6» - самые маленькие заголовки самого низкого уровня.Теги «h2» обычно используются для таких вещей, как заголовки страниц и логотипы веб-сайтов. Теги «h3» внизу обычно используются для разделения контента на вашей странице или публикации. </p> <h4><span class="ez-toc-section" id="_a"> Ссылка на… Все, с тегом «a» </span></h4> <p> Хорошо, пора поговорить о гиперссылках, также известных как «ссылки». Мы ссылаемся на другие страницы нашего сайта, другой контент на той же странице и другие веб-сайты с помощью тега привязки или тега «a». <strong> Чтобы превратить некоторый текст в ссылку, вы заключаете его в тег привязки и используете атрибут «href =» для установки URL-адреса ссылки.</strong> </p> <p> Краткий контекст для тех, кто заинтересован: URL означает унифицированный указатель ресурсов и на обычном языке означает «веб-адрес». URL-адрес состоит из трех частей: </p> <ol> <li> <strong> Протокол: </strong> По сути, он сообщает компьютеру, какую информацию он будет получать или отправлять. Протоколы для веб-страниц: HTTP (протокол передачи гипертекста) и HTTPS (зашифрованная версия HTTP). <br/> Веб-URL начинается с чего-то вроде «https: //», хотя многие браузеры не всегда отображают эту часть.</li> <li> <strong> Доменное имя или IP-адрес: </strong> Для большинства людей это будет отображаться как имя веб-сайта, например «google». Иногда адрес включает префикс «www». в начале, но это уже выходит из моды. Обычно вам не нужно его больше включать. </li> <li> <strong> Домен верхнего уровня (TLD): </strong> Примеры включают «.com», «.org» и «.net», хотя сейчас во всем мире доступны сотни доменов верхнего уровня. </li> </ol> <p> В итоге получается что-то вроде «https: // www.google.com ». И снова «www.» обычно больше не нужно вводить. </p> <p> Когда вы ссылаетесь на другой веб-сайт в HTML, вы должны использовать полный URL, например: </p> <p> <code> ---- </code> </p> <p> <code> <a href="https://google.com"> Google </a> </code> </p> <p> <code> ---- </code> </p> <p> Эта ссылка приведет пользователя на - как вы уже догадались - на Google.com. </p> <p> </p> <p> Однако когда вы ссылаетесь на другую страницу своего сайта, это немного меняет ситуацию.Вероятно, вы будете использовать так называемый «относительный URL». То есть URL-адрес указывает на другой файл на том же сервере. Если у вас есть две страницы в одной папке, например, ваша домашняя страница (всегда с именем index.html) и страница «О нас» (в данном случае about.html), то переход с одной страницы на другую будет еще проще. </p> <p> Чтобы перейти с главной страницы на страницу «О нас», вы должны просто написать: </p> <p> <code> ---- </code> </p> <p> <code> <a href="about.html"> О нас </a> </code> </p> <p> <code> ---- </code> </p> <p> Теперь, если ваша страница «О нас» находилась в подпапке (которая находится в той же папке, что и index.html), и эта папка называлась «about-us», код будет выглядеть так: </p> <p> <code> ---- </code> </p> <p> <code> <a href="about-us/about.html"> О нас </a> </code> </p> <p> <code> ---- </code> </p> <p> Наконец, вы можете ссылаться на контент на своей странице. Когда пользователи нажимают на ссылку, их браузер автоматически прокручивает вниз, чтобы сделать видимым связанный контент. </p> <p> Для этого контент, на который вы хотите создать ссылку, должен иметь атрибут «id =». Атрибут «id =» используется для определения важных разделов веб-страницы, и каждый отдельный «id =» должен использоваться только один раз на странице.Код выглядит примерно так: </p> <p> <code> ---- </code> </p> <p> <code> <a href="#content2"> </a> </code> </p> <p> </p> <p> <code> <div> </code> </p> <p> <code> <p> Вот некоторые материалы. </p> </code> </p> <p> <code> </div> </code> </p> <p> </p> <p> <code> <div> </code> </p> <p> <code> <p> Вот контент, на который вы хотите создать ссылку. </p> </code> </p> <p> <code> </div> </code> </p> <p> <code> ---- </code> </p> <h4><span class="ez-toc-section" id="_img"> Покажите свои фотографии кошек с тегом «img» </span></h4> <p> У вас есть изображение, которое вы хотите разместить на своем веб-сайте? Тогда вам понадобится тег «img»: </p> <p> <code> ---- </code> </p> <p> <code> <noscript><img class="lazy lazy-hidden" src = "images / elephants.jpg "alt =" Изображение чертовых милых слоников. "></noscript><img class="lazyload lazy lazy-hidden" src = "images / elephants.jpg "alt =" Изображение чертовых милых слоников. "><noscript><img src = "images / elephants.jpg "alt =" Изображение чертовых милых слоников. "></noscript> </code> </p> <p> <code> ---- </code> </p> <p> </p> <p> <strong> Тег img имеет два основных атрибута, о которых необходимо помнить. </strong> Первый - это атрибут «src =», который сообщает браузеру, где находится фактическое изображение, чтобы браузер мог его загрузить. Во-вторых, тег alt = используется для нескольких целей, в том числе для того, чтобы люди, которые не видят изображение, знали, о чем оно, и сообщая поисковым системам, о чем оно. </p> <p> Многие люди плохо видят и используют программы чтения с экрана, чтобы читать им вслух.<strong> Альтернативный текст, как известно, необходим для того, чтобы помочь людям получить полное представление о вашем веб-сайте, даже если они не используют глаза для просмотра. </strong> </p> <p> Вы, наверное, догадались, что делают теги «ширина» и «высота». Однако в адаптивном, удобном для мобильных устройств дизайне эти теги используются не всегда. Размер изображений определяется другими способами, а не в HTML. Да, и измерения в этом примере даны в пикселях, поэтому «width =’ 640px ’» означает, что изображение имеет ширину 640 пикселей. </p> <h4><span class="ez-toc-section" id="_Buzzfeed"> Создавайте списки как вы Buzzfeed </span></h4> <p> В HTML есть два формата списков.Первый называется «неупорядоченным списком», который может быть известен как «маркированный список». Он предназначен для перечисления вещей, в которых конкретный порядок в списке не имеет значения. Код выглядит так: </p> <p> <code> ---- </code> </p> <p> <code> <ul> </code> </p> <p> <code> <li> Это элемент списка. </li> </code> </p> <p> <code> <li> Это элемент списка. </li> </code> </p> <p> <code> <li> Это элемент списка. </li> </code> </p> <p> <code> </ul> </code> </p> <p> <code> ---- </code> </p> <p> Второй формат списка - это «упорядоченный список», который присваивает номер каждому элементу списка в возрастающем порядке.Код выглядит так: </p> <p> <code> ---- </code> </p> <p> <code> <ol> </code> </p> <p> <code> <li> Это элемент списка. </li> </code> </p> <p> <code> <li> Это элемент списка. </li> </code> </p> <p> <code> <li> Это элемент списка. </li> </code> </p> <p> <code> </ol> </code> </p> <p> <code> ---- </code> </p> <h4> </h4> <h4><span class="ez-toc-section" id="Blockquote"> Blockquote </span></h4> <p> Это не тот тег, который вы будете использовать каждый день, если только вы не отредактируете много статей в HTML вручную, но я все равно решил поделиться им с вами.Тег «цитата» используется для определения кавычек и отделения этих кавычек (визуально) от остального текста. Вот код: </p> <p> <code> ---- </code> </p> <p> <code> <blockquote> Да пребудет с тобой Сила. - Вероятно, какой-нибудь джедай </blockquote> </code> </p> <p> <code> ---- </code> </p> <p> А вот как это может выглядеть в контексте: </p> <p> </p> <h3><span class="ez-toc-section" id="i-39"> Теги структуры страницы </span></h3> <p> Итак, это «строительные блоки» веб-страницы. Пользователи обычно не «видят» их как таковые, поскольку они используются для определения макета и структуры веб-страницы.Однако вам нужно знать о них, чтобы знать, на что вы смотрите, когда прокручиваете код страницы. </p> <h4><span class="ez-toc-section" id="i-40"> Разделяй и властвуй </span></h4> <p> Первым и самым старым тегом HTML в этом разделе является «div». Это своего рода разделитель общего назначения, предназначенный для отделения одной группы тегов контента от другой. Например, если у вас было два столбца абзацев, вы могли бы написать такой код: </p> <p> <code> ---- </code> </p> <p> <code> <div> </code> </p> <p> <code> <p> Вот текст в левом столбце.</p> </code> </p> <p> <code> </div> </code> </p> <p> </p> <p> <code> <div> </code> </p> <p> <code> <p> Вот еще текст в правом столбце. </p> </code> </p> <p> <code> </div> </code> </p> <p> <code> ---- </code> </p> <p> Опять же, вам нужен CSS для написания кода, который фактически превратит эти два тега «div» в столбцы, иначе они не будут выглядеть так много. Я хочу сказать, что это то, для чего используются теги «div». Вот как они выглядят с примененным кодом CSS макета.</p> <p> </p> <h4><span class="ez-toc-section" id="i-41"> Начало, середина и конец </span></h4> <p> Здесь мы обращаемся к тегам «заголовок», «раздел» и «нижний колонтитул». По сути, они похожи на div, но предназначены для более конкретных целей. <strong> Тег «заголовок» используется для начала области содержимого. </strong> Вы можете использовать его, например, чтобы разместить название вашего веб-сайта вверху страницы, например: </p> <p> <code> ---- </code> </p> <p> <code> <заголовок> </code> </p> <p> <code> <h2><span class="ez-toc-section" id="i-42"> Слонов в изобилии! </span></h2> </code> </p> <p> <code> </header> </code> </p> <p> <code> ---- </code> </p> <p> </p> <p> <strong> Тег section используется для разделения вашего контента на… ну… разделы </strong>.Например, если у вас есть одна область на вашей домашней странице, которая демонстрирует ваши сообщения в блоге, а другая - ваши продукты электронной коммерции, вы можете использовать ее так: </p> <p> <code> ---- </code> </p> <p> <code> <раздел> </code> </p> <p> <code> Разместите здесь свои сообщения в блоге. </code> </p> <p> <code> </section> </code> </p> <p> </p> <p> <code> <раздел> </code> </p> <p> <code> Разместите здесь товары из вашего магазина. </code> </p> <p> <code> </section> </code> </p> <p> <code> ---- </code> </p> <p> Наконец, <strong> тег «нижний колонтитул» используется для закрытия области содержимого </strong>.На веб-странице вы можете использовать тег «нижний колонтитул» для отображения информации об авторских правах, например: </p> <p> <code> ---- </code> </p> <p> <code> <нижний колонтитул> Авторские права и копия; Слонов в изобилии !, 2467 </footer> </code> </p> <p> <code> ---- </code> </p> <h4> </h4> <h4><span class="ez-toc-section" id="i-43"> Тег «Статья» </span></h4> <p> <strong> Тег «article» используется для аналогичного контента, который сгруппирован в один раздел </strong>, например, сообщения в блогах, списки товаров электронной коммерции, списки недвижимости и т.п. .Вы можете использовать теги «header», «section» и «footer» внутри тега «article» для упорядоченного отображения информации. </p> <p> Вот пример: </p> <p> <code> ---- </code> </p> <p> <code> <статья> </code> </p> <p> <code> <заголовок> </code> </p> <p> <code> <h4><span class="ez-toc-section" id="i-44"> Это заголовок сообщения в блоге. </span></h4> </code> </p> <p> <code> </header> </code> </p> <p> <code> <раздел> </code> </p> <p> <code> <p> Здесь размещается содержание сообщений блога.</p> </code> </p> <p> <code> </section> </code> </p> <p> <code> <нижний колонтитул> </code> </p> <p> <code> <p> Этот пост был опубликован в четверг в категории «Слон». </p> p> </code> </p> <p> <code> </footer> </code> </p> <p> <code> </article> </code> </p> <p> <code> </code> </p> <p> <code> <статья> </code> </p> <p> <code> <заголовок> </code> </p> <p> <code> <h4><span class="ez-toc-section" id="i-45"> Это заголовок сообщения в блоге. </span></h4> </code> </p> <p> <code> </header> </code> </p> <p> <code> <раздел> </code> </p> <p> <code> <p> Здесь размещается содержание сообщений блога.</p> </code> </p> <p> <code> </section> </code> </p> <p> <code> <нижний колонтитул> </code> </p> <p> <code> <p> Этот пост был опубликован в четверг в категории «Слон». </p> </code> </p> <p> <code> </footer> </code> </p> <p> <code> </article> </code> </p> <p> <code> </code> </p> <p> <code> <статья> </code> </p> <p> <code> <заголовок> </code> </p> <p> <code> <h4><span class="ez-toc-section" id="i-46"> Это заголовок сообщения в блоге. </span></h4> </code> </p> <p> <code> </header> </code> </p> <p> <code> <раздел> </code> </p> <p> <code> <p> Здесь размещается содержание сообщений блога.</p> </code> </p> <p> <code> </section> </code> </p> <p> <code> <нижний колонтитул> </code> </p> <p> <code> <p> Этот пост был опубликован в четверг в категории «Слон». </p> </code> </p> <p> <code> </footer> </code> </p> <p> <code> </article> </code> </p> <p> <code> ---- </code> <br/> </p> <h3> </h3><strong> С чего начать </strong> </h3> <p> Естественно, HTML может быть намного сложнее, чем то, что я вам здесь показал, но основные концепции достаточно просты.Благодаря тому, что вы узнали здесь, вы сможете копаться в веб-странице или шаблоне, не слишком беспокоясь о том, что все испортят, при условии, что вы вносите только небольшие изменения. </p> <p> Однако каждый шаблон или тема работает по-своему. Все они кодируются немного по-разному. <strong> Внимательно посмотрите на атрибуты тегов «class =» и «id =», чтобы понять, что они делают и на какую часть страницы они влияют. </strong> Не каждый разработчик пишет классы или идентификаторы, которые легко понять, но они могут помочь.</p> <p> Создавайте резервные копии исходных файлов, часто сохраняйте и не забывайте о самой волшебной кнопке: «Отменить». И, самое главное, получайте удовольствие! </p> <h2><span class="ez-toc-section" id="7_HTML"> 7 HTML-рекомендаций по удобству использования веб-сайтов и поисковой оптимизации </span></h2> <p> </p> <p> Можно с уверенностью сказать, что каждый, кто владеет веб-сайтом, хочет, чтобы его сайт привлекал больше трафика, поскольку это предоставляет ему лучшие возможности для роста. Именно здесь многие утверждают, что <em> Search Engine Optimization </em> (SEO) вступает в игру. Но в стремлении завоевать любовь, восхищение и расположение поисковых систем люди склонны забывать о важности удобства использования веб-сайта <em> <em> </em> </em> как силы, которая также способствует качественному трафику.</p> <p> По мере того, как поисковые системы становятся более умными и похожими на людей в том, как они ранжируют свои результаты, оптимизация веб-сайтов становится все более совершенной и дает больше возможностей для улучшения вашего веб-сайта как для удобства использования, </em>, так и для SEO. В этом блоге было написано несколько статей, в которых объясняется, как это можно сделать. Я бы посоветовал посмотреть такие статьи, как: </p> <p> В этой статье я буду использовать это рассуждение, чтобы предоставить вам набор рекомендаций о том, как использовать теги HTML для повышения удобства использования <em> </em> и SEO вашего сайта.Прежде чем я начну, небольшое предостережение - рейтинг в поисковых системах не зависит от качества вашего кода. Точно так же, поскольку удобство использования <em> </em> в основном касается аспекта пользовательского интерфейса вашего веб-сайта, пользователи будут видеть результат интерпретации этого кода веб-браузером, а не сам код. Поэтому важно отметить, что в этой статье обсуждается не кодирование HTML или оптимизация кода HTML, а то, как содержание кода HTML принесет пользу вашему сайту <em> юзабилити, </em> и SEO.</p> <h3><span class="ez-toc-section" id="1"> 1. </span></h3><head> </h3> <p> <strong> SEO: </strong> Это самый важный раздел всей HTML-структуры вашего веб-сайта с точки зрения SEO. Здесь вы собираетесь вставить теги заголовка, мета-описание и даже код аналитики поисковой системы, скорее всего, займет здесь свое место. Кроме того, тег заголовка содержит некоторые другие важные теги, такие как метатеги и, конечно же, очень важные теги rel = "canonical". Все это будет обсуждаться индивидуально в пунктах ниже.Однако из-за его общей важности я чувствовал, что тег заголовка должен иметь самостоятельный смысл. </p> <p> <strong> <em> Удобство использования </em>: </strong> С точки зрения удобства использования </em> <em> </em> тег заголовка может показаться неважным, поскольку этот раздел не повлияет на внешний вид веб-сайта (за исключением тега заголовка). Однако, поскольку большая часть содержимого тега заголовка будет отражена на странице результатов поисковой системы (SERP), если этот контент будет воспринят как обманчивый или непрофессиональный, он не позволит пользователям щелкнуть, чтобы получить доступ к вашему сайту.Google и другие поисковые системы будут использовать содержимое метатегов в заголовке, чтобы выбрать фрагмент вашего веб-сайта. Таким образом, вам нужно сделать его максимально чистым и удобным. </p> <h3><span class="ez-toc-section" id="2"> 2. </span></h3><название> </h3> <p> <strong> SEO: </strong> Давно прошли старые добрые времена, когда наполняли тег заголовка случайными ключевыми словами для привлечения трафика из поисковых систем. Поисковые системы будут отображать содержимое вашего тега заголовка в виде заголовка с возможностью нажатия для объявлений в поисковой выдаче. Они также используют его для определения темы веб-страницы.Это связано с тем, что пауки или сканеры поисковых систем анализируют содержание заголовка страницы, а затем переводят тему страницы. </p> <p> Содержание вашего тега заголовка должно отражать содержание вашей веб-страницы. Помня об этом простом правиле при идеальном введении ключевых слов в начале тега заголовка, вы получите тег заголовка, удобный для SEO. </p> <p> <strong> <em> Удобство использования </em>: </strong> Пользователи идентифицируют веб-сайты, которые могут содержать информацию, которую они ищут, в списке веб-сайтов в поисковой выдаче.Поскольку веб-браузеры используют теги заголовков для обозначения своих вкладок <em> </em>, пользователи в конечном итоге читают содержимое тегов заголовков, чтобы найти вкладку в своем веб-браузере, содержащую сайт, который они хотят просмотреть. </p> <p> По умолчанию веб-браузеры назначают содержимое тегов заголовков сайтам, отмеченным закладками. Таким образом, пользователи также будут ссылаться на содержимое тегов заголовков, чтобы найти веб-сайты, которые они добавили в закладки в своем браузере. Сайты социальных закладок, такие как Facebook, автоматически извлекают содержимое тегов заголовков, когда пользователи прикрепляют ссылку для совместного использования.Таким образом, пользователи в конечном итоге будут ссылаться на содержимое тегов заголовков, чтобы определить, стоит ли проверять веб-сайт, который другие добавили в закладки на веб-сайте социальных закладок. </p> <p> <strong> Полный набор рекомендаций по тегам заголовков </strong> см. В статье: <br/> «15 Рекомендации по оптимизации тегов заголовков для <em> юзабилити </em> и SEO» </p> <h3><span class="ez-toc-section" id="3-2"> 3. </span></h3><meta name = ”description”… </h3> <p> <strong> SEO: </strong> Поисковые системы извлекают контент, помещенный в мета-тег описания, чтобы отображать его как описание веб-сайта в своей поисковой выдаче.Поскольку длина содержания метаописания, отображаемого в поисковой выдаче, варьируется в зависимости от поисковых систем, рекомендуется не превышать 160 символов. Хотя Google не использует содержимое мета-тегов для своего веб-ранжирования, наличие ключевых слов в мета-описании все же может привлечь поисковый трафик, поскольку оно привлечет внимание пользователей. </p> <p> <strong> <em> Удобство использования </em>: </strong> С точки зрения удобства использования <em> </em> <em> </em>, информативные, честные и различные мета-описания для каждой страницы вашего сайта являются обязательными.Как указано выше, пользователи увидят содержимое метаописания в своей поисковой выдаче. Если они увидят несколько списков с одного и того же сайта с одинаковым метаописанием, то у них возникнет проблема с определением, по какой ссылке следует щелкнуть. Кроме того, если они получают доступ к сайту через поисковую выдачу, потому что содержание описания является привлекательным, но то, что они находят, отличается от того, что они воспринимают, то это тоже отрицательно скажется на опыте пользователя. </p> <h3><span class="ez-toc-section" id="4_rel_canonical"> 4. rel = "canonical" </span></h3> <p> <strong> SEO: </strong> Каноническая страница - это предпочтительная версия набора страниц с очень похожим содержанием.Если у вас есть страницы с похожим содержанием, за исключением незначительных, незначительных изменений, установка определенного URL-адреса как канонического позволит решить проблему дублирования контента на вашем сайте. Поисковые системы действительно серьезно наказывают за дублирование контента. </p> <p> <strong> <em> Удобство использования </em>: </strong> Наличие страниц с идентичным или очень похожим содержанием является фактором, сбивающим с толку пользователей. Если такой дублированный контент присутствует в ссылках или <em> навигации </em>, то пользователи не смогут понять, по каким ссылкам нажимать.И наоборот, если доступ к одному и тому же контенту осуществляется через ссылки с разными именами, это тоже запутает пользователей, поскольку они будут пытаться увидеть, отличается ли контент. </p> <h3><span class="ez-toc-section" id="5-2"> 5. </span></h3><a href = ”.. </h3> <p> <strong> SEO: </strong> Излишне говорить, что ссылки необходимы для SEO. Вместе с XML-картами сайта они представляют собой единственный способ, которым поисковые роботы обнаруживают и индексируют веб-страницы. Google использует ссылочный вес, чтобы определить ценность ссылок для своего веб-рейтинга. Чтобы ссылки были удобными для поисковых систем, они должны быть описательными (включая атрибут title) и содержать ключевые слова.</p> <p> <strong> <em> Удобство использования </em>: </strong> Наличие эффективных ссылок означает, что пользователи с большей вероятностью достигнут цели, связанной с тем, почему они находятся на вашем веб-сайте (будь то в целях поиска информации или покупки продуктов или услуг). Достижение этой цели положительно повлияет на их опыт, таким образом увеличивая вероятность того, что они повторно посетят ваш сайт и / или порекомендуют его своим коллегам. </p> <p> <strong> Полный набор ссылок <em> юзабилити </em> рекомендаций </strong> см. В статье: <br/> «15 <em> юзабилити </em> рекомендации по созданию ссылок на веб-сайты» </p> <h3><span class="ez-toc-section" id="6"> 6.</span></h3> <p> <strong> SEO: </strong> Когда код JavaScript (JS) и каскадных таблиц стилей (CSS) встраивается в файлы HTML, он увеличивает размер этих файлов, что замедляет их загрузку. Поисковые системы наказывают медленные веб-сайты, и Google даже ввел скорость сайта в рейтинге веб-поиска. Лучшее решение - экстернализовать файлы JS и CSS и при необходимости извлекать код. Более того, эти внешние файлы CSS и JS должны быть сжаты, так как это уменьшит их размер и, следовательно, будет быстрее извлекаться.Сведение к минимуму количества обращений к серверу для получения этих файлов за счет достижения баланса между количеством файлов и их размерами также может быть полезным для повышения скорости сайта. </p> <p> <strong> <em> Удобство использования </em>: </strong> Пользователи обычно проводят на веб-странице от 10 до 20 секунд, если контент не привлекает их внимания. А теперь представьте, как быстро пользователи покидают веб-страницу, если этот контент загружается очень долго! Исследования, проведенные Google, подтвердили, что «более быстрые сайты создают счастливых пользователей» и «когда сайт медленно реагирует, посетители проводят на нем меньше времени».</p> <h3><span class="ez-toc-section" id="7"> 7. Микроданные </span></h3> <p> <strong> SEO: </strong> Микроданные - это один из трех языков кода, предназначенных для предоставления программам-паукам поисковых систем информации о содержании веб-сайтов. Более того, принятый формат для микроданных, Schema.org, был одобрен Google, Bing и Yahoo! Как пояснил А. Дж. Кумар из Entrepreneur.com, микроданные предоставляют программам-паукам поисковых систем больше контекста для типа информации на веб-сайте, а также способа его индексации и ранжирования.Кроме того, он также создает «расширенные сниппеты», которые отображают больше информации о результатах поиска, чем традиционные списки. </p> <p> <strong> <em> Удобство использования </em>: </strong> Поскольку поисковые системы могут больше узнавать о сайтах, которые они индексируют, они могут предоставлять пользователям лучшие результаты и дополнительную информацию через свои поисковые запросы. Таким образом, внедрение микроданных полезно в начале положительного опыта пользователя, даже до того, как он получит доступ к самому сайту. </p> <h3><span class="ez-toc-section" id="i-47"> Заключение </span></h3> <p> Приведенный выше список ни в коем случае не является исчерпывающим, но я надеюсь, что я предоставил вам хорошую отправную точку, с которой вы можете получить доступ к другим связанным материалам.Если у вас есть предложения о том, как можно улучшить удобство использования <em> </em> и SEO с помощью HTML-тегов, просьба предоставить их в разделе комментариев ниже. Спасибо! </p> <h4> </h4><strong> Хотите узнать больше? </strong> </h4> <p> Вас интересует пересечение UX и UI-дизайна? Онлайн-курсы по шаблонам дизайна пользовательского интерфейса для успешного программного обеспечения и дизайн-мышления: руководство для начинающих могут научить вас нужным навыкам. Если вы пройдете курс, вы получите признанный в отрасли сертификат курса для продвижения по карьерной лестнице.С другой стороны, если вы хотите освежить в памяти основы UX и юзабилити, попробуйте онлайн-курс по пользовательскому опыту (или другой теме дизайна). Удачи в вашем познавательном путешествии! </p> <p> (Изображение: MianShazadRaza через PixaBay) </p> <h2><span class="ez-toc-section" id="HTML_HTML"> HTML Сохранить: разместить HTML-страницу в Интернете </span></h2> <h3> </h3><u> Как это работает? </u> </h3> <p> Мы бесплатно помогаем вам сохранять и размещать ваши HTML-страницы вместе с файлами css, javascript, txt в Интернете. Этот сервис предоставляет простую игровую площадку для игры с HTML-кодами.</p> <p> <strong> Пример сайта 👉🏻 </strong> <u> https://example.htmlsave.net </u> <br/> <strong> Пример HTML-страницы 👉🏻 </strong> <u> https://example.htmlsave.net/page1.html </u> <br/> <strong> Пример ссылки CSS 👉🏻 </strong> <u> https://example.htmlsave.net/style.css </u> <br/> <strong> Пример ссылки JS 👉🏻 </strong> <u> https://example.htmlsave.net/background.js </u> <br/><pre> Встроить домашнюю страницу сайта <br/> <br/> Встроить страницу сайта <br/> <br/> </pre><p>, где «пример» - это настраиваемое имя поддомена </p> </p> Присоединяйтесь к каналу Discord на YouTube <br/> <h3> </h3><u> Как сохранить HTML? </u> </h3> <br/> <ul> <li> Вставьте или введите свой HTML-код или текст в соответствующее поле. (обязательно) </li> <li> Укажите собственное имя, чтобы получить настраиваемый URL. (<strong> <u> опционально </u> </strong>) </li> <li> Укажите пароль для содержимого. (<strong> <u> опционально </u> </strong>) </li> <li> Нажмите кнопку «Отправить для сохранения», чтобы сохранить HTML-код или текст.</li> <li> Вы получаете ссылку на обработанную HTML-страницу, которой можете поделиться с другими. </li> <li> Добавьте на сайт дополнительные страницы, которые могут быть html, css, js, txt, xml, json. </li> <li> Существуют некоторые <u> <strong> Условия хостинга </strong> </u> ваш HTML-код. </li> </ul> <p> <iframe src="https://www.youtube.com/embed/md9Xg_MSe2w?loop=1"/> </iframe> </p> <p> Размещать HTML-код в Интернете очень просто с <strong> HtmlSave.com </strong>. Существуют популярные сервисы, такие как Pastebin, CodePen, JsFiddle и многие другие, которые обеспечивают редактирование и проверку HTML, CSS и javascript в браузере.</p> <p> Но они ограничены двумя вещами: для размещения отрисованного кода в Интернете для совместного использования вам может потребоваться войти на их веб-сайт со всей вашей личной информацией. И они компилируются только в iframe. </p> <p> Мы по адресу <strong> HtmlSave.com </strong> поможем вам вставить ваш HTML-код и отправить его для сохранения в Интернете. Это не значит, что мы не собираем от вас никакой информации. Мы собираем IP-адрес каждого HTML-кода, который вы размещаете на этом веб-сайте. </p> <p> Для редактирования или обновления вставленного HTML-кода мы предоставляем поле для пароля.Таким образом, тот, кто разместил код, может обновить контент только позже. </p> <p> Используйте этот веб-сайт как тестовую площадку или площадку для временного размещения ваших HTML-кодов. Существуют некоторые ограничения и условия использования этого веб-сайта для размещения вашего контента. Ознакомьтесь с Условиями использования <strong> </strong>, <strong> Политикой конфиденциальности </strong> и <strong> О странице </strong>, чтобы узнать больше об этом. </p> <br/> <p> Существует ограничение <strong> 30 000 символов </strong> на HTML-код или текст. Если вы не укажете пароль для страницы, вы не сможете редактировать контент в будущем.</p> <p> По умолчанию все коды, которые вы разместили на этом сайте, будут общедоступными. И он может появиться в результатах поиска в любых поисковых системах. Вы не можете сделать данные конфиденциальными. Любой желающий может просмотреть некоторые из последних HTML-кодов, размещенных на этом веб-сайте, с панели управления. </p> <p> Кроме того, вы можете редактировать содержимое позже, войдя на свой веб-сайт, указав собственное имя и пароль, которые вы установили. </div> <div class="post-meta"> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/shrifty-s-kirillicej-kirillicheskie-shrifty.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Шрифты с кириллицей: Кириллические шрифты</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/redaktor-dlya-verstki-luchshie-redaktory-html-dlya-windows-linux-i-macos.html" rel="next"><span class="meta-nav">Следующая запись</span> Редактор для верстки: Лучшие редакторы HTML для Windows, Linux и macOS</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/sajt/html-kody-dlya-sajtov-makety-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Имя *

Email *

Сайт