Учебник html для чайников: Учебник HTML для начинающих

• При добавлении элемента вам также необходимо закрыть этот элемент. Для основного содержимого вы начинаете с , а затем добавляете , чтобы закрыть элемент. Это будет выглядеть так: здесь содержимое .
• Убедитесь, что когда вы добавляете замещающий текст для информации об изображении, вы добавляете закрывающие кавычки, чтобы браузер знал, что это сделано, и не отображал его на странице.
• Будьте внимательны и следите за использованием прописных и строчных букв в именованных элементах.
• Чтобы отслеживать, что означает ваш код, вы можете добавить в код то, что мы называем «комментариями», которые дают вам информацию о каждом блоке кода, как вы хотите пометить его для дальнейшего использования. — HTML-тег комментария.

Для начала откройте текстовый редактор, например Блокнот.

Добавьте следующий код, чтобы начать работу:

Если вы просто нажмете «сохранить», текстовый редактор захочет сохранить файл как . txt, но вам это не нужно. Вам нужен файл .html . Сохраните документ как « Practice.html », чтобы ваш браузер мог открыть его и понять, что это такое. Ваш браузер не откроет файл .txt.

Теперь добавьте немного текста, чтобы мы могли проверить это в веб-браузере. Добавьте «Udacity поможет вам изучить новые области веб-разработки HTML».

Мы добавим элемент

, чтобы браузер знал, что это основной текст абзаца.

Если дважды щелкнуть файл Practice.html , он должен открыться в браузере по умолчанию и выглядеть примерно так:

Теперь добавим маркированный список.

Добавьте следующий HTML-код:

Веб-результат выглядит следующим образом:

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

Вместо этого ненумерованного списка (UL):

  
• первая строка

  
• вторая строка

  
• третья строка

Вы просто замените

на
для упорядоченного списка
:

  
1. первая строка

  
2. вторая строка

  < li>третья строка


И вы увидите следующий макет:

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

.
обозначает строку таблицы, <тд>39

Udacity поможет вам исследовать новые области HTML. строка    вторая строка    третья строка                                                                           9011 9                                                                           9011 9 Ряд 1 , ячейка 1 Строка 1, ячейка 2 Строка 1, ячейка 3 Строка 2, ячейка 1 Строка 2, ячейка 2 Строка 2, ячейка 3 Строка 3, ячейка 1 Строка 3, ячейка 2 Строка 3, ячейка 3 Строка 4, ячейка 1 Строка 4, ячейка 2 Строка 4, ячейка 3 Веб-результат таков: Вы также можете увидеть разницу в заголовках. Давайте используем , и , чтобы увидеть разницу. Вкратце о нашем HTML для чайников , мы рассмотрели: Базовое понимание таких терминов, как значения, элементы, атрибуты и теги. Базовый HTML для запуска веб-страницы. Маркированный список Нумерованный список Таблицы Заголовки разных уровней Это прочная основа и определенно требует дальнейшего изучения этого очень творческого мира, куда мы перешли из мира печати во всемирную паутину, будучи возможность общаться по всему миру с помощью веб-страницы собственного дизайна. Есть много мест, доступных для дальнейшего исследования. Обязательно проверьте толщину шрифта, семейства шрифтов и размер фонового изображения. Эти учебные пособия помогут вам понять широкий спектр возможностей для творческого макета и дизайна. Куда дальше? Это введение в HTML для чайников должно стать отправной точкой для дальнейшего изучения дизайна, компоновки и практического применения HTML. Как видите, HTML предлагает практически неограниченные возможности для творчества. В следующем блоге мы продолжим изучение других областей HTML-дизайна. Мы надеемся, что это введение пробудило ваш интерес и вдохновило вас на дальнейшее изучение и более глубокое погружение в мир веб-дизайна. Обязательно ознакомьтесь с дополнительными руководствами на нашей странице HTML Hub, а также руководствами на странице CSS Hub. «HTML — отличный способ начать изучение кода, но профессиональный мир требует все больше и больше. Почему бы не улучшить свои навыки и возможности, продвинувшись еще дальше. Запишитесь на нашу программу «Введение в программирование Nanodegree» уже сегодня! Изучите наш каталог курсов и начните собственное обучение с Udacity уже сегодня! Начать обучение HTML является основой современного Интернета. Миллионы веб-сайтов вместе сформировали Интернет. Где HTML является строительным блоком всех этих веб-сайтов. Двадцать лет назад, даже если вы просто блоггер-любитель, вам нужно было знать некоторые веб-программы, чтобы защитить себя или добавить простую функцию на свой сайт. Но сейчас доступно так много редакторов и плагинов, что даже знание основ HTML больше не требуется. Проблема в том, что если вы не знаете нескольких основ, у вас могут возникнуть серьезные проблемы в вашем блоге, и вам придется нанять дорогого разработчика, чтобы исправить то, что может быть незначительной проблемой. Не только это, но и создание изменений в вашем блоге, таких как добавление пользовательского текстового виджета, требует некоторых знаний. И если вы столкнулись с тем, что макет контента выглядит неправильно, знание HTML может помочь вам вернуться в нужное русло. Делаете свой первый сайт? Попробуйте Конструктор сайтов без кода Вам не нужны навыки программирования, чтобы создать веб-сайт с помощью такого конструктора, как Wix. Инструмент поставляется с более чем 800 дизайнерскими шаблонами и позволяет вам управлять своим сайтом с мобильных устройств > Попробуйте Wix бесплатно, нажмите здесь Читайте также 20+ платформ для создания сайтов Лучшие редакторы HTML для рассмотрения Прежде чем начать — основы HTML Что такое HTML? HTML — это сокращение от H yper T доп. M архив L язык. Это стандартный язык для маркировки содержимого для веб-браузеров. HTML представлен «Элементами». Элементы также известны как «теги». Зачем нужен HTML? Веб-браузеры могут отображать веб-сайт только в том случае, если он написан на поддерживаемом ими языке. HTML является наиболее распространенным языком разметки и лучше всего подходит для веб-браузеров. Вот почему вам нужен HTML. Чувствителен ли HTML к регистру? HTML не чувствителен к регистру. Но лучше всего писать HTML с правильным регистром. Удобный для начинающих хостинг для размещения ваших HTML-проектов Если вы новичок, мы рекомендуем хостинг-провайдеров, которые доступны по цене и с которыми легко начать работу. Мгновенная активация учетной записи, простая в использовании панель управления, подробное руководство пользователя и техническая поддержка, которая всегда готова помочь, являются важными требованиями. Хостинг A2 2,99 долл. США/мес. Быстрый веб-хостинг, плавный процесс адаптации новых пользователей (полный обзор). Hostpapa $3.95/мес Экологичный хост, большая скидка для новых пользователей (полный обзор). Hostinger $1.99/мес Хостинг по супернизкой цене, хорошая производительность (полный обзор). GreenGeeks $2.95/мес. 300% зеленый хостинг, бесплатный и простой в управлении SSL (полный обзор). Хостинг InMotion 3,49 долл. США/мес. Очень надежный хостинг; также предлагаем услуги веб-дизайна (полный обзор). Шаги по созданию первого HTML-файла Вы можете создать базовый HTML-файл с помощью Блокнота на своем компьютере. Но писать много строк кода будет больно. Вам нужен редактор кода. Хороший редактор кода облегчит написание и организацию больших кодов. Я использую и рекомендую Notepad++ (бесплатный и с открытым исходным кодом) для написания веб-языков. Вы можете использовать и другие редакторы, такие как Sublime Text, Atom и т. д. Вот что вам нужно сделать: Установить редактор кода Открой Создать новый файл Сохранить как файл .html Содержание Hello World HTML-теги Атрибуты HTML Отображение кода : блок против встроенного Двойная кавычка против одинарной кавычки Семантический HTML против несемантического HTML Проверка HTML Дополнительные полезные ресурсы 1. Привет, мир! Скопируйте и вставьте следующий код в новый HTML-файл и сохраните его. Теперь запустите его в своем веб-браузере. HTML-код <голова> <тело> Привет, мир! Результат: Поздравляем! Вы создали свой самый первый файл HTML. Вам не нужно понимать это в данный момент. Мы расскажем об этом в ближайшее время. Понимание структуры HTML Каждый файл HTML имеет общую голую структуру. Здесь все начинается. И каждая большая страница кодов попадет в эту структуру после обрезки. Итак, давайте попробуем понять это из «Hello World!» код. Следующие элементы являются обязательными частями для каждого HTML-файла. = Объявление для браузера, что это файл HTML. Вы должны указать его перед тегом. = Это корневой элемент файла HTML. Все, что вы пишете, находится между и. = Это часть метаинформации для браузера. Коды внутри этого тега не имеют визуального вывода. = Это часть, которую отображает веб-браузер. То, что вы точно видите на веб-сайте, — это отображение кодов между и. 2. HTML-теги HTML — это сочетание сотен различных тегов. Вам нужно узнать, как они работают. Вы также должны убедиться, что они использовали их правильно. Теги HTML обычно имеют открывающий и закрывающий теги. Открывающий тег содержит ключевое слово, окруженное знаками меньше (<) и больше (>). Закрывающий тег имеет все то же самое, за исключением дополнительной косой черты (/) после знака «меньше» (<). Теги заголовка Все теги заголовка располагаются между и. Они содержат метаинформацию для веб-браузера и поисковых систем. Они в основном не имеют визуального выхода. Тег title определяет заголовок веб-страницы, отображаемый на вкладке браузера. Эта информация используется веб-программами и поисковыми системами. У вас может быть максимум один заголовок для каждого HTML-файла. Код: Тег заголовка появляется в верхней части браузера. Тег Link связывает вашу HTML-страницу с внешними ресурсами. Его основное использование — связывание HTML-страницы с таблицами стилей CSS. Это самозакрывающийся тег, и ему не нужно окончание. Здесь rel означает связь с файлом, а src означает источник. Код: Мета — это еще один самозакрывающийся тег, предоставляющий метаинформацию html файл. Поисковые системы и другие веб-сервисы используют эту информацию. Метатеги необходимы, если вы хотите оптимизировать свою страницу для поисковых систем. Код: Тег script используется для включения сценария на стороне сервера или создания ссылки на внешний файл сценария. Он может иметь два атрибута в открывающем теге. Один тип, а другой источник (src). Код: Тег Noscript работает, когда скрипты отключены в сети браузер. Это делает страницу совместимой с теми, кто не разрешает скрипты в своих веб-браузерах. Код: Теги тела Все теги тела находятся между и. У них есть визуальные выходы. Здесь делается больше всего работы. Вы должны использовать эти теги для структурирования содержимого главной страницы. От до Это теги заголовков. Самый важный заголовок помечен тегом , а наименее важный — тегом . Вы должны использовать их в правильной иерархии. Код: Это заголовок h2 Это заголовок h3 Это заголовок h4 Это заголовок h5 Это заголовок h5 Это заголовок h6 Вывод: Теги форматирования Текст в html-файле можно форматировать с помощью многих тегов форматирования. Это будет необходимо, когда вы хотите выделить слово или строку из вашего контента. Код: Текст можно выделить разными способами. Вы можете выделение жирным шрифтом, подчеркивание, курсив, отметка, подстрочный индекс, верхний индекс и многое другое! Вывод: Вы можете изменить отображение некоторых кодов, используя тег комментария. Код будет отображаться в исходном коде, но не будет отображаться. В основном этот тег используется для создания документации html-файлов для дальнейшего использования. Пример: Другие важные теги HTML Якорь — бесценная бирка, которая используется практически везде. Вы не увидите ни одной веб-страницы в Интернете без хотя бы одной якорной ссылки. Структура такая же. Он имеет открывающую и закрывающую часть . Текст, который вы хотите привязать, находится между и . Есть несколько атрибутов, определяющих, куда и как переходит пользователь после нажатия на него. ahref=" " = Определяет ссылку назначения. Ссылка идет между двойными кавычками. target=" " = Определяет, будет ли URL-адрес открываться в новой вкладке браузера или в той же вкладке. target="_blank" для новой вкладки, а target="_self" для открытия в той же вкладке. rel=" " = Определяет отношение текущей страницы к связанной странице. Если вы не доверяете связанной странице, вы можете определить rel=”nofollow”. Код: Нажмите здесь, чтобы перейти в Google. Он откроется в новой вкладке. Нажмите здесь. Он также перенаправит вас в Google, но откроется в текущей вкладке. Вывод: Тег изображения — еще один важный тег, без которого вы не можете представить многие веб-сайты, основанные на изображениях. — это самозакрывающийся тег. Ему не нужно традиционное закрытие, такое как . Есть некоторые атрибуты, которые вам нужно знать, прежде чем вы сможете правильно их использовать. src=" " = Это для определения ссылки на источник изображения. Поместите ссылку прямо между двойными кавычками. alt=" " = Альтернативный текст. Когда ваше изображение не загружается, этот текст даст пользователям представление об отсутствующем изображении. width=" " = Определяет ширину изображения в пикселях. Height=" " = Определяет высоту изображения в пикселях. Это Googleplex в августе 2014 года. Это изображение имеет ширину 500 пикселей и высоту 375 пикселей. Вывод: Советы: Хотите вставить кликабельное изображение? Оберните код изображения тегом . Посмотрите, как это происходит. или Тег списка предназначен для создания списка элементов. обозначает упорядоченные списки (нумерованные списки), а — неупорядоченные списки (маркированные пункты). Элементы списка внутри или помечены тегом . li означает список. Внутри родительского тега или может быть сколько угодно . Код: Это упорядоченный список: <ол> Элемент 1 Элемент 2 Элемент 3 Это ненумерованный список: <ул> Элемент 1 Элемент 2 Элемент 3 Вывод: Тег Table предназначен для создания таблицы данных. Есть несколько тегов внутреннего уровня, которые определяют заголовки, строки и столбцы таблицы. — внешний родительский код. В этом теге
— столбец таблицы, а	— заголовок таблицы. Код: <таблица>
Имя	Возраст	Профессия
Джо	27	Бизнесмен
Кэрол	26	Медсестра
Симона	Профессор

Вывод:

Примечание. Значения внутри первого являются заголовками. Итак, мы использовали, который применяет к тексту эффект жирного шрифта.

Группировка таблиц

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

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

Теги группировки таблиц:

• = Для переноса заголовков таблицы. Он печатает на каждую разделенную страницу таблицы.
• = Для переноса основных данных таблицы. Вы можете иметь столько, сколько вам нужно. Тег означает отдельную группу данных.
• = Для переноса информации нижнего колонтитула таблицы. Он печатает на каждую разделенную страницу таблицы.

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

Вот как мы можем сгруппировать нашу иллюстрированную таблицу в, и:

Код:

 
<тд>39
<тд>3



Имя
Возраст
Профессия




Джон
27
Бизнесмен


Кэрол
26
Медсестра


Симона
Профессор




Всего человек:



 

Вывод:

Элемент формы используется для создания интерактивных форм для веб-страниц. HTML-форма содержит несколько последовательных элементов. Например: , , и т. д. </p> <p> Атрибут действия в форме очень важен. Он указывает на серверную или стороннюю страницу для обработки информации. Для обработки необходимо сначала определить метод. </p> <p> Вы можете использовать любой из двух методов: получить или отправить. Get отправляет всю информацию в формате URL, а Post отправляет информацию в теле сообщения. </p> <p> Существует множество типов ввода для форм. Самым основным типом ввода является текст. Записывается как <input type="text">. Типы также могут быть радио, флажком, электронной почтой и так далее. Внизу должен быть ввод типа отправки для создания кнопки отправки. </p> <p> Тег <label> используется для создания меток и связывания их с входными данными. Правило связывания меток с входными данными заключается в том, что они имеют одинаковое значение в атрибуте for=” ” метки и атрибуте id=” ” ввода. </p> <p> <strong> Код: </strong> </p><pre> <form action="#"> <label for="firstname">Имя: </label> <тип ввода="текст"><br> <label for="lastname">Фамилия: </label> <тип ввода="текст"><br> <label for="bio">Краткая биография: </label> <textarea rows="10" cols="30" placeholder="Введите здесь свою биографию.<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fsd.multiurok.ru/html/2020/11/23/s_5fbbba8fcaa4e/img22.jpg' /><noscript><img loading='lazy' src='/800/600/http/fsd.multiurok.ru/html/2020/11/23/s_5fbbba8fcaa4e/img22.jpg' /></noscript> ..">
Пол:
Мужской
Женщина
<форма>

Вывод:

Примечание. Я указал действие на нулевое значение, поскольку оно не было подключено ни к какому серверу для обработки информации.

3. Атрибуты HTML

Атрибуты — это один из типов модификаторов тегов HTML. Они добавляют новые конфигурации в теги HTML.

Атрибут выглядит как attributename=” ” и находится в открывающем теге HTML. Значение атрибута заключено в двойные кавычки.

идентификатор = "" и класс = ""

id и class — это идентификаторы тегов HTML. Разным элементам HTML присваиваются разные имена с помощью идентификаторов. Вы можете использовать один идентификатор класса для нескольких элементов. Но вы не можете использовать один идентификатор id для нескольких элементов.

Код:

 
Это основной заголовок
 

href=""

href означает гипертекстовую ссылку. Они указывают пользователям на реферальные ссылки. Тег привязки использует href для отправки пользователей по целевому URL-адресу.

Код:

 Google 

src=""

src обозначает источник. Он определяет источник медиа или ресурса, который вы используете в файле HTML. Источник может быть как локальным, так и сторонним URL.

Код:

alt=""

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

Код:

style=""

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

Код:

 
Это другой заголовок
 

4. Отображение кода: блочный или встроенный

Некоторые элементы всегда начинаются с новой строки и занимают всю доступную ширину. Это элементы «Блок».

Пример:

,

,

-

, form и т. д.

Некоторые элементы занимают только необходимое место и не начинаются с новой строки. Это «встроенные» элементы.

Пример: , ,
, , и т. д.

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

Код:

 

<голова>


<тело>
 
Это заголовок h3. Он имеет блочное отображение.
 
 
Это 
еще один заголовок h3. Здесь тег подчеркивания имеет встроенное отображение.  

 

Вывод:

5. Двойные и одинарные кавычки в HTML

Этот вопрос очень очевиден. Что следует использовать в HTML? Одинарная кавычка или двойная кавычка? Люди, кажется, используют оба, но какой из них правильный?

В HTML одинарная и двойная кавычки совпадают. Они не имеют никакого значения на выходе.

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

6. Семантический HTML и несемантический HTML

Семантический HTML — это последняя версия HTML, которая также называется HTML5. Это разработанная версия несемантического HTML и XHTML.

Почему HTML5 лучше? В предыдущих версиях элементы HTML идентифицировались по именам идентификаторов/классов. Например:

считается статьей.

В HTML5 тег

представляет собой статью, не требуя идентификатора/класса.

Благодаря HTML5 поисковые системы и другие веб-приложения теперь могут лучше понимать веб-страницу. Доказано, что семантические веб-сайты лучше подходят для SEO.

Вот список некоторых популярных тегов HTML5:

• = Это для упаковки основного контента, который вы хотите показать своим зрителям.
• = Это используется для разметки части заголовка содержимого, например метаданных заголовка или автора.
• = Указывает определенный пользователем или независимый контент для ваших зрителей.
• = Он может сгруппировать любой код, например заголовок, нижний колонтитул или боковую панель. Можно сказать, что это семантическая форма div.
• = Здесь находится содержимое нижнего колонтитула, заявление об отказе от ответственности или текст об авторских правах.
• = Позволяет вставлять аудиофайлы без каких-либо проблем с плагинами.
• = Как и

Простая структура HTML5 будет выглядеть так:

 

<голова>
<метакодировка="utf-8" />


<тело>
<заголовок>
<навигация>
<ул>
Меню 1
Меню 2