Всем привет друзья. Продолжаем изучение и сегодня у нас еще один небольшой практикум по закреплению знаний и мы на простых html примерах научимся новым приемам работы с этим языком разметки страниц. Если в этом уроке вы встретите незнакомые вам теги, то не переживайте. Мы дадим объяснение в последующих статьях.
Все документы в html начинаются с объявления типа документа, обозначаемого <!DOCTYPE html>
Сам документ HTML начинается с <html> и заканчивается </ html> . Видимая часть документа HTML находится между <body> и </ body> .
Пример:
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body> <h1>Этой мой первый заголовок</h1> <p>Мой первый параграф</p> </body> </html> |
Попробуйте сами прямо сейчас. Можете использовать для помощи текстовые редакторы из предыдущей статьи.
Все заголовки на странице определяются следующими тегами начиная с <h1> до <h6>
<h1> определяет наиболее важный заголовок, который должен встречаться ТОЛЬКО ОДИН РАЗ на странице. <h6> определяет наименее важный заголовок:
1 2 3 |
<h1>Это заголовок h1</h1> <h2>Это заголовок h2</h2> <h3>Это заголовок h3</h3> |
Данные элемент html страницы определяется тегом <p>
Пример:
1 2 |
<p>Это первый параграф</p> <p>Это второй параграф.</p> |
Определяются через тег <a>
Пример:
1 |
<a href="https://smarticle.ru">Это ссылка на главную страницу блога</a> |
Пункт назначения ссылки указан в атрибуте href.
Атрибуты используются для предоставления дополнительной информации об элементах HTML:
Все картинки, изображения определяются через тег <img>
У любой картинки есть источник (src), альтернативный текст (alt), длина задаваемая через width, высота через атрибут height
Пример изображения в html
1 |
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> |
В браузере выглядит вот так:
Вот видите, какой получился короткий урок по основам языка HTML, впереди нас ждут более интересные и сложные примеры и потихоньку вы научитесь всем премудростям и тонкостям разработки простых и сложных проектов. Всем спасибо за внимание и я жду Вас в следующем выпуске. До скорой встречи!