Основы HTML

вёрстка сайта своими руками

HTML используется для вёрстки сайтов, а его последняя версия — HTML5. Лучший способ изучения основ HTML — вёрстка сайта своими руками. Сайты состоят из веб-страниц — это html-документы.

1. Создание html-документа

Для написания кода используют специальные редакторы кода, типа: Notepad++ или Sublime Text. Это бесплатные редакторы с поддержкой русского языка. У них есть подсветка синтаксиса, подсказки, автоподстановка элементов кода и текста — всё это облегчает написание кода, да и сам код визуально воспринимается легче.

Но можно использовать обычный текстовой редактор Блокнот, он есть на любом компьютере. В Windows 10 он находится в меню «Пуск — Стандартные».

Создаём веб-страницу в редакторе Блокнот

Открываем Блокнот и создаём новый файл (Файл — Новый), выбираем сохранить (Файл — Сохранить). В поле «Имя файла» набираем «index» с расширением «.html», index — это стандартное название главной страницы сайта. Если вы используете Блокнот, то очень важно выбрать правильную кодировку файла: UTF-8 и без галочки в BOM. Это универсальная кодировка, в редакторах кода она задана по умолчанию:

Создание HTML-документа

А сохранить файл лучше в отдельной папке, поэтому создадим её на диске C, назовём «mysite», а в неё уже сохраним файл. Это будет корневая папка нашего сайта, а путь к файлу у нас должен получиться вот такой:

Создание корневой папки сайта

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

Включить видимость расширений для файлов

2. Структура html-документа

Обязательные теги

Набираем в первой строке: <!DOCTYPE html> в угловых скобках.

Тег !DOCTYPE

Так начинаются все документы HTML5, эта запись сообщает браузеру (веб-обозревателю) тип документа, а, именно, что он имеет дело с документом HTML5. Посмотрите, как эта запись выглядела в предыдущей версии языка. И как сейчас всё стало проще.

Тег !DOCTYPE в HTML5 и в HTML 4

Вся разметка веб-страницы состоит из тегов. Теги бывают двух видов:

С закрывающим тегом, где добавляется слэш (косая черта).
И без закрывающего тега.

Теги HTML

Во второй строке набираем тег <html>, все остальные теги на странице будут вложены в него. Далее, набираем два тега: <head> и <body>.

Структура html-документа

Тег <head> (от англ. голова) содержит служебные элементы, их на странице не видно. Содержимое тега <body> — это тело веб-страницы, и все его элементы мы будем видеть в браузере.

Все теги, которые мы прописали, обязательные. Но зачем я делаю отступы? А вот это не обязательно, отступы делаются для удобства, чтобы не путаться и самому легче понимать код.

Отступы в html-документе

3. Текст: абзацы и заголовки

Форматирование текста

Переходим к самому интересному, к содержимому нашей страницы в теге <body>. Поместим в него какой-нибудь текст из двух абзацев и сохраним наш документ.

Разметка текста в HTML

А теперь откроем нашу страницу в браузере (В папке mysite: клик правой кнопкой мыши по файлу index.html — Открыть с помощью — ваш браузер). И что мы видим? Он выглядит единым массивом, его неудобно читать.

Текст в HTML

Абзацы

Чтобы разбить текст на абзацы используется тег <p>.

Абзацы в HTML

Заголовки

И, конечно, у нас явно не хватает заголовка. Заголовки бывают 6-ти уровней. Заголовок 1-го уровня отображается наиболее крупным шрифтом, и должен быть на странице только один. Размер шрифта остальных заголовков идёт по убыванию.

Заголовки в HTML

Теги H в HTML

Не забываем снова сохранить документ (сочетание клавиш Ctrl+S). И смотрим в браузере. А здесь не забываем обновить страницу (кнопкой или клавишей F5).

Форматирование текста в HTML

Как видите текст стал отформатирован. А знаете, почему заголовки и абзацы начинаются с новой строки? Потому что теги <h> и <p> являются блочными элементами и занимают всю ширину тега <body>, т.е. всей страницы.

Блочные элементы в HTML

Но кроме блочных, есть и строчные элементы. Добавим в текст теги <b> и <i>. Тег <b> делает шрифт жирным, а <i> устанавливает курсив. Это строчные элементы.

Жирный шрифт и курсив в HTML

Строчные элементы в HTML

В разметке HTML нужно следовать правилам вложенности тегов. Это чем-то напоминает матрёшку.

Правила вложенности тегов в HTML

Добавим тег <hr> — это блочный элемент. Он занимают всю ширину тега <body>, и создает горизонтальную линию.

Тег HR в HTML

Сохраняем документ и смотрим в браузере.

4. Служебные теги

Служебные теги

Вернёмся ненадолго к тегу <head>, и пропишем служебные теги. Тег <title> задает название веб-страницы, и он обязательный. Его содержимое отображается в заголовке вкладки браузера.

Тег Title в HTML

Помните, при создании файла, мы указывали его кодировку: utf-8. Так вот, её нужно указывать дважды. Для чего? Наверняка вам приходилось видеть вот такие кракозябры.

Кодировка HTML-документа

И, чтобы браузер понимал кодировку файла, и правильно отображал страницу, нужно прописать её в самом html-файле. Для этого используют служебный тег <meta>, у него нет закрывающего тега. А атрибут charset отвечает за кодировку.

Атрибут charset

Что такое атрибут? Атрибут показывает дополнительную характеристику элемента. Все атрибуты пишутся так:

Что такое атрибут в HTML

Запишем ещё два мета-тега.

Мета-тег Description и Keywords

В мета-теге Keywords указывают ключевые слова, но в последние годы поисковые системы не учитывают этот тег, его можно не прописывать. Мета-тег Description служит для краткого описания документа. Он может влиять на формирование сниппета (с англ. фрагмент) — это анонс страницы, который выводится в поисковой выдаче. Поэтому его желательно прописать (атрибут content, в кавычках).

Сниппет в поисковой выдаче

На скриншоте, вы видите значок, который называется фавикон (favicon). Фавиконку, размером 32 на 32 пикселя, в формате ico нужно размещать в корневой папке сайта. Создают их в онлайн-генераторах, их немало.

Фавикон для сайта

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

Комментарии в разметке HTML

Полезное отступление. Ключевые фразы (это как хештеги) должны встречаться в тексте, и обязательно в теге <title> и заголовках, особенно в <h1>. Поисковые системы уделяют им особое внимание. В конечном итоге, место в поисковой выдаче Яндекса и Гугла определяет полезность контента для пользователей, но вначале поисковым роботам, как и пользователям, нужно «понять» смысл содержимого веб-страницы. Тег <title> у нас уже прописан, остался заголовок <h1>:

Заголовок H1 в HTML

5. Изображения

Вставка изображений

Для вставки изображений используют тег <img>, у него нет закрывающего тега. Изображения — это файлы в формате .jpg, .gif или .png.

Формат изображений

Возьмите какое-нибудь изображение на компьютере или скачайте из интернета, и поместите его в папку «mysite» с нашим учебным файлом index.html. У тега <img> есть обязательный атрибут src (от англ. source — источник). Он указывает путь к изображению.

Как вставить изображение в HTML

У меня это файл с названием "verstka" в формате .png. А вы пропишите своё название или переименуйте файл, а расширение укажите своё, если у вас оно не .png, а .jpg или .gif.

Изображения в HTML

Корневая папка нашего сайта — это папка «mysite». В ней уместно создать отдельную папку для изображений. Создадим папку с названием «img1» и перетащим в неё картинку.

Папка для изображений

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

Путь до файла картинки

Сохраняем файл и проверяем в браузере. Это мы указали относительный путь к файлу изображения. А есть путь абсолютный, т.е. полный. Его используют, если картинка находится на другом сайте, и тогда путь к файлу изображения (URL картинки, т.е. адрес) выглядит примерно так:

Абсолютный URL картинки

Разницу между относительным и абсолютным путём можно пояснить примером. Когда вы говорите соседу по подъезду, что у вас квартира 50, то он вас легко найдёт. А если сообщаете свой адрес новому знакомому на тропическом курорте, то указать, конечно, нужно полный адрес.

Разница между относительным и абсолютным URL

Кстати, если у вас картинка слишком большая, то добавьте в тег <img> атрибут widht, отвечающий за ширину элемента (320 пикселей, будет как у меня):

Ширина изображения

Атрибуты, отвечающие за ширину и высоту элементов, которые указываются в пикселях или процентах:

Ширина и высота элементов

У тега <img> есть еще один обязательный атрибут — alt, он задает альтернативный текст, если браузер по какой-нибудь причине не отображает изображение. Грамотно прописанный alt, участвуя в поиске картинок, даёт дополнительных посетителей из поисковых систем.

6. Ссылки

Вставка ссылок

Вы, конечно, знаете, что такое ссылки. Они есть на любой веб-странице. Они связывают страницы между собой или ведут на другие сайты. В HTML за них отвечает тег <a>, у которого есть обязательный атрибут href, где в кавычках прописывается URL, т.е. адрес, куда эта ссылка ведёт. А текст ссылки помещается внутрь тега.

Абсолютный URL ссылки

Кстати, вместо текста можно использовать изображение, поместив тег <img> внутрь тега <a>. В нашем примере мы указали абсолютный (т.е. полный) путь к определённой веб-странице сайта.

А если бы записали так, то ссылка вела бы на главную страницу сайта, и это было бы равнозначно такой записи:

URL главной страницы сайта

Тег <a> — это строчный элемент, поэтому его можно вставить в любое место текста и сделать определённое слово или фразу ссылкой. Мы к этому ещё вернёмся.

Но можно также указывать относительный путь:

Относительный URL

Чтобы увидеть это наглядно, откроем нашу папку «mysite». Сделаем копию файла index, и переименуем её в second. Это будет вторая страница нашего учебного сайта.

Создание второй страницы сайта

В теге <a> пропишем «Страница 2»:

Страница 2

Осталось на странице second поменять ссылку. Для этого откроем её в редакторе. А ещё для отличия изменим у неё тег <title> и заголовок <h1>:

Вторая страница

Название страницы

Сохраните оба документа (сочетание клавиш Ctrl+Shift+S). Обновите страницу в браузере (кнопкой или клавишей F5) и проверьте ссылки на обеих страницах. Вот наш сайт уже состоит из двух страниц!

У тега <a> есть и другие атрибуты. Атрибут target задает параметр загрузки страницы, а его значение _blank (начинается со знака подчёркивания) — загружает страницу в новой вкладке браузера. Если не использовать атрибут target, то по умолчанию, страница откроется в той же вкладке. Сохраните документ и проверьте работу ссылки.

Атрибут target

И последнее, что нужно знать про ссылки. Закладка в любом месте страницы называется якорь. С помощью таких закладок можно, например, создать оглавление для большой по объёму страницы. В HTML5 для создания якоря используют универсальный атрибут id.

Как создать якорь в HTML

Создадим якорь на второй странице second для заголовка h2 «Изображения» и присвоим ему имя «link1»:

Создание якоря

Имя можно выбрать любое, но оно должно быть уникальным. Т.е. имя «link1» уже нельзя будет использовать для других элементов. А ссылку на якорь пропишем на главной странице index. Мы просто добавляем к адресу страницы, через знак решётки, имя id, т.е «#link1».

Ссылка на якорь

И, после сохранения документа, проверяем в браузере. Страница должна открываться не вначале, а на месте якоря. А если якорь и ссылка на него находятся на одной странице, то запись будет ещё проще:

Ссылка на якорь на этой же странице

Кстати, познакомьтесь с ещё одним тегом <br>, он служит для переноса строки. Мы его используем, чтобы упорядочить ссылки.

Тег br

Перенос строки в HTML

7. Списки

Маркированные и нумерованные списки

В HTML с помощью тега <ul> создают маркированные списки. А тег <li> задаёт пункты.

Маркированный список

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

Нумерованный список

Создание списков в HTML

8. Таблицы

Создание таблиц

Для создания таблиц используется основной тег <table>, в котором поочерёдно размещают строки <tr>, а в каждой строке помещаются ячейки <td>. Формирование таблиц в HTML — процесс довольно несложный.

Рассмотрим создание таблицы, для начала — самой простой (вид в браузере → код):

создание таблиц теги html таблицы

Для того чтобы таблица отображалась с рамкой, в тег <table> просто добавляем атрибут border с шириной 2px. Существующие в HTML атрибуты позволяют оформить внешний вид таблицы, или её отдельных ячеек. Основные из них мы будем использовать в этом уроке.

Объединение ячеек таблицы

Не так сложно создать таблицу и с объединёнными ячейками. Для этого в теге <td> используются атрибуты colspan и rowspan, которые служат для объединения ячеек по горизонтали и вертикали соответственно. Возьмём и усложним наш пример следующим образом:

объединение ячеек атрибуты colspan и rowspan

Вначале, добавляем третью строку. Затем объединяем ячейки 1.1 и 1.2: к первой добавляем атрибут colspan со значением «2», а вторую удаляем из кода. Если значением атрибута было бы «3», то объединились бы три ячейки, а код ячейки 1.3 нужно было бы удалить.

Аналогично выглядит объединённые по вертикали ячейки 2.3 и 3.3, последняя изъята из кода. А для первой применили атрибут rowspan. Как вы заметили, мы определили ширину таблицы в % — половину от ширины страницы, добавив к тегу <table> атрибут width. Осталось узнать об остальных атрибутах тегов, формирующих таблицу.

Оформление таблиц

Нужно сказать, что для оформления «шапки» таблицы существует тег <th>. Он заменяет тег <td> и создаёт заголовочную ячейку для колонки, выделяя её содержимое жирным шрифтом и центрируя текст. Для демонстрации возможностей оформления таблиц возьмём предыдущий пример и оснастим некоторые теги дополнительными атрибутами:

оформление таблиц код таблицы

Перечислю их, а подробнее в справочнике HTML. Выровнять содержимое ячеек помогут атрибуты align и valign — по горизонтали и вертикали. Они применимы и для строк <tr>, а align и для тега <table>, т.е. для всей таблицы. Высоту ячейки, а, следовательно, строки, задаёт атрибут height, а фон — bgcolor.

Естественно, что оформлять внешний вид таблиц лучше через свойства CSS. Например, свойства text-align и vertical-align послужат для выравнивания содержимого. Свойства margin и padding зададут поля и отступы, вместо аналогичных атрибутов cellspacing и cellpadding тега <table>. Это же касается цвета, фона и размеров. Стили CSS позволяют добиться более значимых эффектов.

9. Формы

Создание форм

Основным элементом для создания форм в HTML служит тег <form>, а самая простейшая форма имеет два текстовых поля и кнопку. Ничего сложного в создании такой формы нет, а мы будем использовать её в качестве рабочего примера:

создание формы в html

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

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

Вот так будет выглядеть каркас нашей формы:

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" name="Любое" target="_blank">
...
</form>

Его нужно рассмотреть отдельно, потому что тег <form> имеет два обязательных атрибута, которые должны присутствовать в любой форме:

action — адрес обработчика данных формы. Это может быть локальный скрипт на вашем сайте, а в данном примере — это URL сервиса рассылок.
method — определяет метод запроса данных: post — закрытая передача данных через запрос браузера, он наиболее распространённый. Метод get подразумевает открытую передачу данных через адресную строку браузера и используется реже.
name — необязательный атрибут, который задаёт название формы. Актуально при использовании нескольких форм, или, если имя формы необходимо для работы определённого скрипта.
target — необязательный атрибут, при значении _blank загружает URL обработчика данных в новой вкладке браузера.

Создание элементов формы

Для создания элементов формы используется незакрывающийся тег <input> с обязательным атрибутом type, который имеет множество значений.

Нам же для создания двух текстовых полей понадобятся два тега <input> со значением "text" атрибута type. А для создания кнопки — парный тег <button>, где у атрибута type — значение "submit", которое будет отправлять данные обработчику:

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" target="_blank">

  <input type="text" name="field_name_first" placeholder="Ваше Имя">
  <input type="text" name="field_email" placeholder="Ваш E-mail">
  <button type="submit" name="lead_subscribe">Войти</button>

</form>

Вот что означают атрибуты тега <input> в нашей форме:

type — значение «text» означает текстовое поле. Значение «password» — текстовое поле для ввода пароля с отображением звездочек; «range» — ползунок; «reset» — кнопка сброса и др.
name — имя полей.
placeholder — видимый текст в поле формы, при наведении фокуса — исчезает. Как вариант: атрибут value — значение по умолчанию, при сбросе пользователем введённых данных — восстанавливается первоначальная текстовая надпись.

Вот как будет выглядеть готовая форма, без форматирования:

Чекбоксы и кнопки

Для создания чекбоксов и радио-кнопок также используется тег <input>, разница только в значениях атрибута type:

                
<form action="URL" method="post">

  <input type="checkbox" name="box" value="1">Поставьте галочку, если согласны

  <input type="radio" name="radiobutton" value="1">Красный
  <input type="radio" name="radiobutton" value="2">Жёлтый
  <input type="radio" name="radiobutton" value="3">Зелёный

</form>

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

                

            Поставьте галочку, если согласны


            Красный
            Жёлтый
            Зелёный

Атрибуты name и value не являются обязательными, а используются при обработке данных формы с помощью скриптов, к примеру, это может быть JavaScript.

Осталось узнать о двух тегах, которые используются для создания сложных форм: <textarea> и <select>.

Текстовая область

Чтобы сделать текстовую область, куда допустимо ввести текст из нескольких строк с сохранением переносов, используем тег <textarea>:

                
<form action="URL" method="post">

  <textarea rows="5" cols="30">Ваша биография</textarea>

</form>

Атрибуты rows и cols являются обязательными для версий ниже HTML5 и задают число строк и их общую длину. Получаем следующую текстовую область, которая может вмещать 5 строк по 30 символов в каждой:

                

        Ваша биография

Создание выпадающего списка

Для создания выпадающего списка используем тег <select>, а для его отдельных элементов тег <option>:

                
<form action="URL" method="post">

  <select name="forscript">
      <option value="1">Элемент 1</option>
      <option value="2">Элемент 2</option>
      <option value="3">Элемент 3</option>
      <option value="4">Элемент 4</option>
  </select>

</form>

Атрибуты обоих тегов не обязательны. Однако, атрибут value — задает значение для пары «Имя=Значение» отправляемого обработчику (например: JavaScript), а имя — это значение атрибута name тега <select>. Таким образом, значение переменной forscript будет forscript=1 или forscript=2 и т.д.

Получаем выпадающий список из 4-х элементов:

10. Видео

Урок наглядно покажет: как вставить видео на веб-страницу любой версии HTML. Рассмотрим, для каждого способа вставки видео на сайт, имеющиеся у него плюсы и минусы.

вставка видео на веб-страницу

Вставка видео с плеером

Вначале о том, как вставить видео на страницу с любой версией HTML (HTML5, XHTML). Этот пример универсален и работает на 99.9%: пользователь сможет посмотреть видео в любом более-менее не старом браузере, каким-бы устройством он не пользовался.

Для этого потребуется плеер, например: FlowPlayer, который без труда можно найти в сети. Этот плеер проигрывает видео в формате MP4 и FLV.

Код для вставки видео на страницу выглядит следующим образом (где «papka/name.…» — это путь к вашему видеофайлу, а «name» — его имя):

<video width="400" height="300" preload="auto" controls>
  <source src="papka/name.mp4" />
  <source src="papka/name.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <source src="papka/name.webm" type='video/webm; codecs="vp8, vorbis"' />
      <object type="application/x-shockwave-flash" width="400" height="300">
        <param name="movie" value="papka/flowplayer-3.2.6.swf" /> 
        <param name="flashvars" value='config={"clip":"papka/name.mp4"}' />
      </object>
  <p>Ваш браузер не поддерживает просмотр</p> 
  <a href="papka/name.mp4">Скачать видео</a>
</video>

Поместите FlowPlayer в ту же папку, где находятся видеофайлы. Атрибуты тега <video> в данном примере: preload="auto" — загружает видео вместе со страницей, если не использовать этот атрибут, то страница загрузится быстрее, а видео подгрузится при его включении пользователем; controls — показывает панель управления видео.

Замените пропорционально ширину и высоту видео (width и height — в двух местах) на свои, не забывая про соотношение его сторон: 4:3 или 16:9.

Последние две строчки: теги <p> и <a> с содержимым — позволят пользователю скачать видеофайл, если он всё-таки не сможет его просмотреть.

Вы сразу же сможете проверить работоспособность кода на вашем компьютере. Но для просмотра видео на сайте может потребоваться создать файл httpd.conf, поместить его в папку с видеофайлами — он должен содержать три строчки:

AddType video/ogg.ogv
AddType video/mp4.mp4
AddType video/webm.webm

Минусом этого способа будет большое потребление ресурсов при одновременном просмотре видео большим количеством посетителей, но это легко нейтрализовать. Для снижения нагрузки на сервер нужно размещать видео на сторонних сервисах, типа облачного хранилища Яндекс Диск, где срок хранения файлов не ограничен.

Вставка видео в HTML5 без плеера

А так можно вставить видео на страницу с HTML5, здесь атрибут <poster — это путь к изображению-заставке:

<video width="400" height="300" controls poster="images/zastavka.png">
    <source src="papka/name.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="papka/name.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="papka/name.webm" type='video/webm; codecs="vp8, vorbis"'>
    <p>Ваш браузер не поддерживает просмотр</p> 
    <a href="papka/name.mp4">Скачать видео</a>
</video>

Чтобы добиться воспроизведения ролика в различных браузерах, видео необходимо конвертировать, а в папку поместить 3 видеофайла в разных форматах. Это можно сделать онлайн, например, здесь: online-convert.com.

Минусом этого способа будет то, что на некоторых устаревших устройствах код будет работать некорректно. Если кроссбраузерность жизненно необходима, то лучше применять вариант №1 — вставку видео с использованием плеера.

11. Аудио

Для того чтобы вставить аудио на страницу у нас в распоряжении опять 2 варианта: с mp3-плеером и без него — с помощью кода HTML5. У этого способа вставки аудио те же плюсы и минусы: он проще, но не поддерживается устаревшими браузерами (IE ниже v.9).

Вставка аудио

Способ 1. Код вставки аудио на страницу (где «papka/name.…» — путь к аудиофайлу, а «name» — его имя):

<audio controls>
    <source src="papka/name.mp3">
    <source src="papka/name.ogg">
    <source src="papka/name.wav">
    <p>Ваш браузер не поддерживает прослушивание</p> 
    <a href="papka/name.mp3">Скачать аудио</a>
</audio>

Нужно конвертировать аудиофайл в три формата, а если браузер у пользователя окажется устаревшим, то он сможет скачать файл.

Для снижения нагрузки на ваш сервер, желательно хранить аудиофайлы на стороннем ресурсе, типа Яндекс Диск.

Способ 2. Скачайте mp3-плеер (flv-mp3.com/ru) и поместите его в папку с аудиофайлами. На этом сайте есть возможность «собрать» плеер самому, т.е. задать ему свои настройки:

скачать mp3-плеер

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

Второй параметр будет влиять на размеры и вид панели плеера, а так же надписи «Прослушать» — её вы измените на свою. Выглядеть панель будет как на следующем скриншоте, но вы сможете изменить цвет, форму и кнопки управления на более красивые:

вставка аудио

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

Вёрстка HTML\CSS / с нуля

курс