Html кода: Структура кода | htmlbook.ru

Тег , или якорь, позволяет создавать ссылки.Простая ссылка выглядит так:

   Во многих случаях это будет другой веб-сайт. Это также может быть файл, например изображение или PDF-файл.
 Другие полезные атрибуты включают «цель» и «заголовок»."Атрибут target почти всегда используется для открытия ссылки в новой вкладке или окне, например:
   Перейти к MakeUseOf в новой вкладке   
  Результат: 
 Перейдите в MakeUseOf в новой вкладке
 Атрибут «title» создает всплывающую подсказку. Наведите указатель мыши на ссылку ниже, чтобы увидеть, как это работает:
   Наведите указатель мыши на нее, чтобы увидеть всплывающую подсказку   
  Результат: 
 Наведите указатель мыши на это, чтобы увидеть всплывающую подсказку
 13.
 Если вы хотите встроить изображение на свою страницу, вам нужно будет использовать тег изображения.Обычно вы используете его вместе с атрибутом «src». Это указывает источник изображения, например:
    
  Результат: 
 Доступны и другие атрибуты, такие как «высота», «ширина» и «альт»."Вот как это может выглядеть:
    
 Как и следовало ожидать, атрибуты «высота» и «ширина» устанавливают высоту и ширину изображения.В общем, рекомендуется установить только один из них, чтобы изображение масштабировалось правильно. Если вы используете оба, вы можете получить растянутое или сжатое изображение.
 Тег «alt» сообщает браузеру, какой текст отображать, если изображение не может быть отображено, и его рекомендуется включать в любое изображение.Если у кого-то особенно медленное соединение или старый браузер, они все равно могут понять, что должно быть на вашей странице.
 14.
 Тег упорядоченного списка позволяет создать упорядоченный список.В общем, это означает, что вы получите нумерованный список. Каждому элементу в списке нужен тег элемента списка (
), поэтому ваш список будет выглядеть так:
  
 
 
 Первое 
 
 
 Второе 
 
 
 Третье 
 
 
  
  Результат: 
 Первым делом
 Вторая вещь
 Третье
 В HTML5 вы можете использовать
 для изменения порядка чисел.И вы можете установить начальное значение с помощью атрибута start.
 Атрибут «type» позволяет указать браузеру, какой тип символа использовать для элементов списка.Его можно установить на «1», «A», «a», «I» или «i», установив отображение списка с указанным символом следующим образом:
  
  
 15.
 Неупорядоченный список намного проще, чем его упорядоченный аналог.Это просто маркированный список.
  
 
 
 Первый элемент 
 
 
 Второй элемент 
 
 
 Третий элемент 
 
 
  
  Результат: 
 Первый предмет
 Второй предмет
 Третий пункт
 Неупорядоченные списки также имеют атрибуты «тип», и вы можете установить его как «диск», «круг» или «квадрат»."
 16.
<таблица>
 Хотя использование таблиц для форматирования не одобряется, во многих случаях вы захотите использовать строки и столбцы для сегментации информации на своей странице.Чтобы таблица заработала, необходимо несколько тегов. Вот пример HTML-кода:
  












  
  
  
 1-й столбец 
  
 2-й столбец 
  
  
  
 Строка 1, столбец 1 
  
 Строка 1, столбец 2 
  
  
 Строка 2, столбец 1 
  
 Строка 2, столбец 2 
  
  
  
 Теги
 и определяют начало и конец таблицы.Тег содержит все содержимое таблицы.
 Каждая строка таблицы заключена в тег.Каждая ячейка в каждой строке заключена в теги для заголовков столбцов или теги для данных столбца. Вам понадобится один из них для каждого столбца в каждой строке.
  Результат: 
 1-я колонна
 2-я колонна
 Ряд 1, столбец 1
 Ряд 1, столбец 2
 Ряд 2, столбец 1
 Ряд 2, столбец 2
 17.
 Когда вы цитируете другой веб-сайт или человека и хотите выделить цитату отдельно от остальной части документа, используйте тег blockquote.Все, что вам нужно сделать, это заключить цитату в открывающие и закрывающие теги цитат:
  
 Интернет, каким я его представлял, мы еще не видели.Будущее по-прежнему намного больше, чем прошлое. 
  
  Результат: 
 Интернет, каким я его представлял, мы еще не видели.Будущее по-прежнему намного больше, чем прошлое.
 Точное используемое форматирование может зависеть от используемого вами браузера или CSS вашего сайта.Но тег остался прежним.
 Go Forth и HTML 
 С этими 17 примерами HTML (и их количество растет) вы сможете создать простой веб-сайт.Чтобы увидеть, как их все соединить, вы можете загрузить наш образец HTML-страницы. Откройте его в браузере, чтобы увидеть, как все это работает, или в текстовом редакторе, чтобы увидеть, как именно работает код.
 Чтобы получить больше уроков по HTML, попробуйте эти приложения для микрообучения по программированию.
  14 способов сделать Windows 10 быстрее и повысить производительность 
 Сделать Windows 10 быстрее несложно.Вот несколько методов повышения скорости и производительности Windows 10.
 Читать дальше
  Об авторе   Энди Беттс
 (Опубликовано 223 статей) 
 Энди - бывший печатный журналист и редактор журнала, который пишет о технологиях уже 15 лет.За это время он внес вклад в бесчисленное количество публикаций и написал работы по копирайтингу для крупных технологических компаний. Он также предоставил экспертные комментарии для средств массовой информации и организовал панели на отраслевых мероприятиях.
 Более
 От Энди Беттса
 Подпишитесь на нашу рассылку новостей 
 Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
 Еще один шаг…! 
 Пожалуйста, подтвердите свой адрес электронной почты в письме, которое мы вам только что отправили.
 Как редактировать код WordPress 
 Хотя WordPress упрощает управление сайтом для некодеров, вероятно, наступит время, когда вы захотите отредактировать код в WordPress, чтобы получить немного больше контроля над тем, как ваш сайт выглядит или функционирует.
 Чтобы помочь вам в этом, этот пост покажет вам, как безопасно редактировать код в WordPress несколькими различными способами:
 Если вы уже знаете, что хотите сделать, вы можете щелкнуть одну из приведенных выше ссылок, чтобы перейти прямо к этому конкретному разделу.В противном случае приступим к редактированию! 
 Как вы можете редактировать код WordPress: 
 Чтобы получить больший контроль над внешним видом и функциями вашего сайта WordPress, вы можете редактировать код WordPress, настраивая различные области:
 Новый редактор блоков и классический редактор позволяют редактировать HTML-код для отдельных сообщений или страниц.
 Если вы хотите отредактировать исходный код своей темы WordPress, используйте дочернюю тему.
 Рассмотрите возможность использования подключаемого модуля для управления фрагментами кода, которые вы добавляете в или functions.php вашей темы.
 Если вы просто хотите добавить собственный CSS, вы можете использовать область «Дополнительные CSS» в настройщике WordPress или такой плагин, как «Simple CSS».
 Как редактировать HTML в WordPress для отдельных сообщений / страниц 
 Давайте начнем с простейшего способа редактирования HTML в WordPress - доступа к исходному коду отдельных сообщений, страниц или других типов сообщений WordPress.
 Вы можете сделать это как в новом редакторе блоков WordPress (Gutenberg), так и в старом классическом редакторе TinyMCE.
 Как редактировать HTML в WordPress в редакторе блоков (Гутенберг) 
 Есть несколько способов работы с HTML в Gutenberg.
 Во-первых, если вы просто хотите добавить свой собственный HTML-код к части контента, я бы порекомендовал , а не , пытаться редактировать весь исходный код вашего сообщения, так как это излишне усложняет задачу.
 Вместо этого вы можете просто использовать специальный блок  Custom HTML  и вставить туда HTML-код, который вы хотите использовать:
 Пользовательский блок HTML Гутенберга
 Однако может наступить время, когда вам потребуется напрямую отредактировать HTML другого блока.Например, если вы хотите добавить тег nofollow к ссылке в редакторе блоков, вам нужно будет отредактировать HTML этого блока.
 Это можно сделать двумя способами…
 Во-первых, вы можете щелкнуть по параметрам отдельного блока и выбрать вариант  Редактировать как HTML :
 Как редактировать отдельный блок как HTML
 Это позволит вам редактировать HTML только для этого отдельного блока:
 Пример редактирования HTML блока
 Или, если вы хотите отредактировать HTML для всего сообщения  , вы можете получить доступ к редактору кода   из основного раскрывающегося меню  Инструменты и параметры .Или вы также можете просто использовать это сочетание клавиш для переключения между кодом и визуальным редактированием -  Ctrl + Shift + Alt + M :
 Как получить доступ к полному редактору кода в Gutenberg
 Имейте в виду, что в полном редакторе кода вам придется обойти всю эту разметку для блоков, например   .
 Редактировать код в WordPress не должно быть сложно! Ознакомьтесь с этим простым руководством по настройке HTML, CSS и PHP. 🤓Нажмите, чтобы написать твит
 Как редактировать HTML в WordPress в классическом редакторе (TinyMCE) 
 Если вы все еще используете классический редактор WordPress (TinyMCE), вы можете редактировать HTML для всего сообщения, перейдя на вкладку  Текст :
 Как редактировать HTML в классическом редакторе WordPress
 Как отредактировать исходный код в вашей теме WordPress 
 А теперь перейдем к более важной теме - как редактировать код в вашей теме WordPress.Ставки немного выше, поэтому нам нужно ответить на несколько предварительных вопросов, прежде чем мы перейдем к практическим рекомендациям.
 Почему ставки выше? Проще говоря, это потому, что вы можете сломать свой сайт, если здесь что-то напутаете!
 В последних выпусках WordPress значительно усложнил вам возможность случайно сделать это, но редактирование исходного кода вашего сайта всегда открывает дверь для проблем, поэтому вы должны быть уверены, что делаете это безопасно.
 Используйте дочернюю тему для любых изменений прямого кода 
 Если вы планируете напрямую редактировать какой-либо код в файлах вашей темы, вам нужно использовать дочернюю тему, а не редактировать «родительскую» тему.
 Без дочерней темы любые внесенные вами изменения кода будут перезаписаны при следующем обновлении темы. Однако при использовании дочерней темы вы сможете быстро обновить родительскую тему, не теряя изменений, внесенных в дочернюю тему.
 Если вы хотите узнать больше о преимуществах дочерних тем, а также о том, как их создать, ознакомьтесь с нашим полным руководством по дочерним темам WordPress.
 Рассмотрите возможность использования подключаемого модуля вместо редактирования кода в дочерней теме 
 Если вы планируете изменить способ работы своей темы, вам, вероятно, придется работать, напрямую редактируя исходный код дочерней темы.
 Однако, если вы хотите отредактировать код в WordPress по другой причине - например, добавив скрипт отслеживания в раздел вашего сайта или добавив фрагмент в файл  functions.php  вашей темы - вам может быть лучше использовать вместо этого плагин.
 Подпишитесь на информационный бюллетень 
 Мы увеличили наш трафик на 1187% с помощью WordPress. 
 Мы покажем вам, как это сделать.
 Присоединяйтесь к более чем 20 000 других людей, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!
 Подпишись сейчас
 Например, инъекции заголовка, нижнего колонтитула и поста упрощают внедрение фрагментов кода там, где это необходимо.А поскольку все эти фрагменты кода отделены в интерфейсе плагина, управлять ими в будущем будет проще.
 Точно так же, если вы добавляете фрагмент кода, который может быть помещен в файл  functions.php  вашей дочерней темы, бесплатный плагин Code Snippets станет отличным вариантом.
 Таким образом, если вы хотите отредактировать код в WordPress, чтобы добавить фрагменты в свою тему…
   раздел
 Файл Functions.php
… тогда вам следует подумать об использовании плагина вместо прямого редактирования файлов вашей темы, так как это упростит управление этими фрагментами и гарантирует, что они не будут перезаписаны при обновлении темы.
 Если вам нужно внести другие правки, давайте разберемся, как редактировать исходный код для вашей темы.
 Используйте встроенный редактор кода WordPress 
 Если вы планируете напрямую редактировать код своей темы, мы настоятельно рекомендуем вам сделать резервную копию своего сайта перед этим (либо всего сайта, либо файла, который вы редактируете).
 После того, как вы это сделаете, вы можете получить доступ к редактору кода темы на панели инструментов, перейдя в  Внешний вид → Редактор темы . Здесь WordPress сначала выдаст предупреждение, подобное тому, что вы узнали выше:
 Предупреждение перед доступом к редактору кода в приборной панели
 Затем вы сможете использовать боковую панель справа для перехода между различными файлами тем и самим редактором кода для внесения фактических изменений:
 Встроенный редактор кода WordPress
 Использование SFTP для редактирования кода в WordPress 
 В качестве альтернативы редактору кода на панели инструментов вы также можете редактировать файлы темы через SFTP.У этого подхода есть два преимущества:
 Вы можете использовать предпочитаемый редактор кода.
 Если вы случайно что-то сломали, вы можете сразу исправить проблему. Напротив, если вы редактируете код через свою панель управления WordPress, всегда есть вероятность, что вы можете сломать что-то, что блокирует вас из вашей панели управления WordPress, что означает, что вам нужно будет подключиться через SFTP, чтобы решить проблему (хотя, опять же, это менее вероятно благодаря недавним изменениям).
 Вот как подключиться к вашему сайту через FTP.
 После этого перейдите в папку своей темы - … / wp-content / themes / child-theme-name . Найдите файл, который хотите отредактировать, и щелкните его правой кнопкой мыши. Большинство программ FTP предоставляют вам возможность редактировать файл и автоматически повторно загружают файл после внесения изменений.
 Однако мы настоятельно рекомендуем вам загрузить исходную версию файла на рабочий стол, прежде чем вносить какие-либо изменения. Таким образом, вы можете просто повторно загрузить исходную версию, если случайно что-то сломаете:
 Как редактировать HTML в WordPress через SFTP
 Как добавить собственный CSS в WordPress 
 Если вы хотите добавить в WordPress только собственный CSS, а не редактировать HTML или PHP-код WordPress, вам не нужно использовать редактор кода на панели инструментов или методы SFTP.
 Вместо этого вы можете использовать настройщик WordPress. Помимо более простого варианта, еще одним преимуществом этого подхода является то, что вы сможете предварительно просмотреть свои изменения в режиме реального времени.
 Для начала перейдите в  Внешний вид → Настройте  на панели инструментов WordPress:
 Как получить доступ к настройщику WordPress
 Затем найдите параметр  Additional CSS  в настройщике WordPress:
 Где найти дополнительную опцию CSS в настройщике WordPress
 Это откроет редактор кода, в который вы можете добавить желаемый CSS.Когда вы добавляете CSS, предварительный просмотр вашего сайта будет автоматически обновляться в соответствии с этими изменениями:
 Как редактировать CSS в настройщике WordPress
 Еще один хороший вариант для добавления CSS - плагин Simple CSS от Tom Usborne. Он дает вам аналогичную опцию в настройщике WordPress, а также позволяет добавлять настраиваемый CSS к отдельным сообщениям или страницам через мета-поле.
 Наконец, если вы хотите добавить тонну настраиваемого CSS - например, сотни или тысячи строк - другой вариант - создать свою собственную таблицу стилей CSS и использовать wp_enqueue_scripts, чтобы добавить ее в свою тему.
 Сводка 
 Если вы хотите редактировать код в отдельном посте или странице WordPress, новый редактор блоков и классический редактор предоставляют вам возможности для непосредственного редактирования HTML.
 С другой стороны, если вы хотите отредактировать исходный код своей темы WordPress, следует учесть несколько вещей:
 Всегда используйте дочернюю тему вместо того, чтобы редактировать код непосредственно в родительской теме.
 Рассмотрите возможность использования подключаемого модуля для управления фрагментами, которые вы добавляете к функциям ,  или .php , так как эти плагины могут предложить более простой и управляемый подход.
 Если после этих соображений вам все еще нужно внести прямые правки в код, вы можете отредактировать исходный код дочерней темы на панели инструментов WordPress, перейдя в  Внешний вид → Редактор темы . Или вы можете подключиться к своему сайту через SFTP и отредактировать код таким образом.
 Наконец, если вы просто хотите добавить собственный CSS, вам не нужно напрямую редактировать код своей темы. Вместо этого вы можете просто использовать область  Additional CSS  в настройщике WordPress или такой плагин, как Simple CSS.
 Есть вопросы о том, как редактировать код в WordPress? Спрашивайте в комментариях!
 Если вам понравилось это руководство, то вам понравится наша поддержка. Все планы хостинга Kinsta включают круглосуточную поддержку наших опытных разработчиков и инженеров WordPress. Общайтесь с той же командой, которая поддерживает наших клиентов из списка Fortune 500. Ознакомьтесь с нашими тарифами
 squizlabs / HTML_CodeSniffer: HTML_CodeSniffer - это клиентское приложение JavaScript, которое проверяет документ HTML или исходный код и обнаруживает нарушения определенного стандарта кодирования.Поставляется со стандартами, которые охватывают три уровня соответствия Руководству по обеспечению доступности веб-контента (WCAG) 2.0 W3C и законодательству США Раздел 508. 
 Что такое HTML_CodeSniffer? 
 HTML_CodeSniffer - это приложение JavaScript, которое проверяет документ HTML.
или исходный код, и обнаруживает нарушения определенного представления или доступности
стандарт, например Section508 или WCAG2.1.
 Включены стандарты 
 По умолчанию HTML_CodeSniffer поставляется со стандартами, которые охватывают три соответствия
уровни Руководства W3C по доступности веб-контента (WCAG) 2.1,
и Закон США Раздел 508.
Он также предоставляет инструменты для написания собственных стандартов, которые могут быть полезны в ситуациях.
где вы хотите обеспечить единообразие всего веб-сайта.
 Использование HTML_CodeSniffer 
 HTML_CodeSniffer можно вызвать несколькими способами:
 Вызываемый непосредственно в исходном коде JavaScript, HTML_CodeSniffer предоставляет список известных
и возможные нарушения вызывающего сценария.
 Он также имеет всплывающий интерфейс аудитора, доступный через букмарклет,
позволяя вам просматривать сообщения, отправленные в соответствии с одним из определенных стандартов.По возможности аудитор также указывает вам на элемент HTML, вызывающий проблему.
 Его также можно запустить из командной строки с помощью безголового браузера.
 Использование в качестве модуля Node.js, установленного с npm:  npm i --save html_codesniffer 
 Использование исходного кода 
 Строительный аудитор 
 Аудитор HTML_CodeSniffer может быть построен с использованием Node.js и Grunt.
бегун задач. Он был протестирован с последней версией Node.js
(начиная с версии 6.0) и Grunt.
 Установите Node.js с помощью выбранного диспетчера пакетов, например  sudo apt-get install nodejs 
 Возможно, вам потребуется обновить сам диспетчер пакетов Node.js (npm):  npm install -g npm 
 Установите помощник Grunt CLI, если вы еще этого не сделали:  npm install -g grunt-cli 
 Получите Node.js для установки зависимостей, необходимых Grunt:  npm install 
 Запустите Grunt, чтобы собрать аудитора:  grunt build 
 Вы должны увидеть два новых каталога:  node_modules  (содержащий файл Node.js
зависимости) и  build  (содержащий вашего аудитора). Затем вы можете переехать
(или символическая ссылка) ваш каталог  build  в веб-доступный
место расположения.
 Затем возьмите или скопируйте код JavaScript из букмарклета аудитора с сайта HTML_CodeSniffer,
замените каталог в начале (//squizlabs.github.io/HTML_CodeSniffer/build) своим локальным URL-адресом и сохраните как новый букмарклет.
 Отладка сборки 
 Если вы разрабатываете с использованием HTML_CodeSniffer и требуете, чтобы код не уменьшался для
В целях отладки выполните указанные выше действия, но запустите  grunt build-debug  (вместо того, чтобы просто строить).Это объединит файлы как обычно, но не уменьшит их.
 Обработка командной строки 
  Примечание:  В этих примерах предполагается, что встроенная версия HTMLCS экспортирована в  ./build/HTMLCS.js 
 PhantomJS 
 Вам понадобится установленный PhantomJS, если вы хотите
используйте предоставленный сценарий командной строки. PhantomJS предоставляет безголовый Webkit
браузер для запуска скриптов, поэтому он должен предоставлять результаты, аналогичные
недавние (или немного меньшие по сравнению с последними) версии Safari.
 Дополнительные сведения см. В файле  Contrib / PhantomJS / HTMLCS_Run.js .
 Безголовый Google Chrome через Puppeteer 
 Кукловод предлагает
простой способ взаимодействия со страницей через Google Chrome.
 В этом примере предполагается, что установлена ​​последняя версия Google Chrome,
следовательно, потребуется только ядро ​​кукловода  :
 Тестовый сценарий предполагает наличие последней версии Node.js.
 const puppeteer = require ('ядро кукольника');

// Замените на путь к исполняемому файлу Chrome в вашей файловой системе.Это предполагает MacOSX.
const executablePath = '/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome';

// Замените URL-адресом, который вы хотите проверить.
const url = 'https://www.squiz.net';

(async () => {
  const browser = await puppeteer.launch ({
    исполняемый путь
  });

  const page = ждать browser.newPage ();

  page.on ('console', msg => {
    console.log (msg.text ())
  });

  ждать page.goto (url);

  await page.addScriptTag ({
    путь: 'build / HTMLCS.js'
  });

  await page.evaluate (function () {
    HTMLCS_RUNNER.запустить ('WCAG2AA');
  });

  ждать browser.close ();
}) (); 
 Node.js и JSDom 
 HTML_CodeSniffer требует для запуска DOM, однако его можно запустить полностью
на стороне сервера без браузера без головы с использованием Node.js на произвольных фрагментах HTML с использованием
оболочка окружения, такая как JSDom.
 Пример сценария Node.js:
 var jsdom = require ('jsdom');
var {JSDOM} = jsdom;
var fs = require ('fs');

var HTMLCS = fs.readFileSync ('./ build / HTMLCS.js', 'utf-8');
var vConsole = новый jsdom.VirtualConsole ();

// Перенаправляем сообщения на консоль.
vConsole.on ('журнал', функция (сообщение) {
    console.log (сообщение)
});

var dom = new JSDOM ('', {
    runScripts: "опасно",
    virtualConsole: vConsole
});

dom.window.eval (HTMLCS);
dom.window.HTMLCS_RUNNER.run ('WCAG2AA'); 
 Переводы 
 HTML_CodeSniffer поддерживает  очень  базовых переводов строк. Аудитор будет использовать текущий язык документа, в котором он работает (например,грамм.  ). Код языка может быть предоставлен, если вам нужно указать HTML_CodeSniffer, какой язык вы хотите использовать.
 Пример использования:
 HTMLCSAuditor.run ('WCAG2AA', null, {
  lang: 'pl'
}); 
  Примечание.  HTML_CodeSniffer поддерживает только английский (по умолчанию), французский и польский языки.
 Если требуется поддержка других языков, можно создать собственную версию, добавив больше переводов в  Translations / *. Js  и используя процесс сборки grunt, описанный выше.
 Вопросы, связанные с участием и сообщением 
 Чтобы сообщить о любых проблемах с использованием HTML_CodeSniffer, используйте
HTML_CodeSniffer для отслеживания проблем.
 Также приветствуются вклады в базу кода HTML_CodeSniffer: пожалуйста, создайте
форк основного репозитория, затем отправьте измененный код через
Запрос на вытягивание для проверки. Запрос на вытягивание
также автоматически создает проблему в системе отслеживания проблем, поэтому, если у вас есть код для
внести свой вклад, вам не нужно делать и то, и другое.
 Дополнительная информация 
 Более подробную информацию о HTML_CodeSniffer можно найти на его сайте GitHub,
http: // squizlabs.github.io/HTML_CodeSniffer/. На этом сайте представлены:
 Информация о проведенных тестах (и отправленных сообщениях) по стандартам HTML_CodeSniffer, организованная по уровню соответствия и критерию успеха;
 Область тестирования исходного кода, которая позволяет вам опробовать HTML_CodeSniffer с вашим собственным исходным кодом HTML; и
 Ссылка на букмарклет HTML_CodeSniffer, позволяющую проверять другие страницы с помощью всплывающего интерфейса аудитора.
 Авторы переводов 
 Особая благодарность:
 Лицензия 
 Лицензия BSD 3-пункт «Новая» или «Пересмотренная» лицензия.
 Текст лицензии также доступен в файле  license.txt .
 Часть 1: Ваш первый веб-сайт | Учебник HTML и CSS 
 Давайте погрузимся и создадим нашу первую веб-страницу.
 Для веб-разработки вам понадобятся две программы: редактор   для создания файлов для веб-сайта и браузер   (например, Edge, Firefox, Safari или Chrome) для просмотра и тестирования вашего веб-сайта.
 Редактор 
 Для создания веб-страниц достаточно обычного текстового редактора.Но есть редакторы, которые значительно упрощают работу программиста. Поэтому я рекомендую вам использовать современный редактор кода.
 Моим текущим фаворитом среди множества редакторов является Visual Studio Code (бесплатно). Вы можете использовать любой редактор по своему выбору, но я иногда буду ссылаться на некоторые функции Visual Studio Code (VS Code). Хорошая альтернатива - Atom или Brackets.
 Установите редактор. Если вы не знаете, какой именно, используйте сейчас Visual Studio Code.
 Расширения редактора 
 Пока мы занимаемся этим, мы сделаем расширение VS Code, которое придаст суперспособности нашему редактору: Live Server.
 Откройте код Visual Studio.
 Откройте меню «Расширения». 
 Введите «Live Server» в поле поиска и установите расширение. 
 Перезагрузите код Visual Studio, чтобы активировать расширение. 
 Браузер 
 Конечно, наш веб-сайт должен работать во всех основных браузерах (Edge, Firefox, Chrome и Safari).Однако для веб-разработки я рекомендую использовать Chrome. Chrome включает в себя очень полезные инструменты для разработчиков, которыми вы будете часто пользоваться.
 Если на вашем компьютере нет Chrome, вы можете установить его здесь.
 Создание HTML-документа 
 Давайте создадим первый HTML-документ для нашего веб-сайта, оснащенный редактором и браузером.
 Создайте папку на вашем компьютере для вашего проекта. Назовите папку  Portfolio  (или как хотите).
 Открытый код VS.
 Откройте меню  Файл  и выберите  Открыть папку… . Найдите созданную вами папку и откройте ее. 
 Щелкните правой кнопкой мыши под папкой и выберите  Новый файл . Назовите файл  index.html .
 Теперь у вас есть пустой текстовый файл с именем  index.html .
 Почему index.html? 
 Вы, наверное, догадались, что имя  index.html  действительно имеет особое значение. Если вызывается адрес веб-сайта, например  https://code.makery.ch , сначала автоматически отображается файл  index.html , который в данном случае  https://code.makery.ch/index .html . Для нас наша первая страница  index.html  станет нашей домашней страницей.
 Просмотр и обновление 
 Теперь вы можете заполнить документ содержимым. Введите следующие строки в свой HTML-код.
 Для просмотра страницы мы будем использовать расширение  Live Server , которое мы установили выше.Щелкните правой кнопкой мыши свой  index.html  (файл под папкой «Портфолио», а не тот, который находится выше в разделе «Открытые редакторы»). Затем щелкните  Открыть с помощью Live Server . Окно браузера должно открыться и показать ваш первый веб-сайт. Теперь, когда вы сохраняете какие-либо изменения, они автоматически обновляются живым сервером.
 Если страница  не открывается в предпочитаемом вами браузере : Измените настройки на вашем компьютере, чтобы сделать другой браузер вашим стандартным браузером.В качестве альтернативы вы можете скопировать адрес (например,  http://127.0.0.1:5500/index.html ) из одного браузера и вставить его в другой.
 Если страница  не обновляется  после изменений: сохраните все ваши файлы в редакторе, а затем - внутри браузера - обновите с помощью  F5  или  cmd + r .
  Поздравляем! Вы только что создали свой первый сайт! 
 Отступ 
 Чтобы ваш код оставался чистым, важно, чтобы вы правильно делали отступ строк с помощью клавиши табуляции  .Обратите особое внимание на пример кода и сделайте соответствующий отступ. Браузеру все равно, но для нас, программистов, важно иметь четкое представление.
  Совет 1:  Используйте клавиши  Shift + Tab  для перемещения отступа влево.
  Совет 2:  Вы можете сделать отступ сразу для нескольких строк, если выделите их и щелкните  Tab  или  Shift + Tab .
  Совет 3 (автоматически):  Щелкните правой кнопкой мыши где-нибудь в программном коде и выберите  Форматировать документ .
 HTML-элементы 
 Теги 
 В приведенном выше примере вы уже видели типичные символы HTML с угловыми скобками. Они называются тегами  .
  HTML-элементы  обычно (но не всегда) состоят из двух тегов, одного открывающего и одного закрывающего. В нашем примере   - это открывающий тег, а   с косой чертой - закрывающий тег.
 Текст между открывающим и закрывающим тегами является содержимым HTML-элемента.С помощью   и   мы сообщаем браузеру о начале и конце HTML нашей веб-страницы.
 Второй тег, который мы видели, - это тег  . В нем указано, что все содержимое между открывающим тегом   и закрывающим тегом   должно отображаться в основной области браузера.
 Атрибуты 
 Атрибуты объявляют дополнительную информацию об элементе. Атрибуты являются частью открывающего тега элемента и всегда имеют имя   и значение  .
 В качестве примера рассмотрим элемент HTML для ссылки. Это, наверное, один из самых важных элементов - каким был бы Интернет без ссылок?
 Указанный выше элемент    включает атрибут  href  (сокращение от «гипертекстовая ссылка») со значением  https://code.makery.ch . Браузер знает, что он должен отображать ссылку как «Мой веб-сайт».
 Базовая структура HTML-страницы 
 Мы уже видели два элемента:   и  .Но базовая структура HTML-страницы обычно содержит еще несколько. Настройте свой сайт на следующий код. После мы обсудим каждый его элемент.
 Структура HTML 


  
    
    
  
  
     
 Веб-портфолио Марко 
 
    
 Напишите все, что хотите рассказать миру. 
  

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

     
 Добро пожаловать! 
 

    
 Спасибо, что заглянули. 

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

    

    
 Марко :-) 
  

 

Вот так сейчас выглядит портфолио в браузере:

Что дальше?

→ В следующем разделе вы узнаете, как опубликовать свой сайт в Интернете. Продолжите с части 2: публикация вашего веб-сайта

21 базовый HTML-код, который должен знать каждый, кто не является разработчиком.

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

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

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

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

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

21 Основы HTML, которые должен знать каждый не-разработчик

1. Заголовки