Урок #3: Основы языка HTML на простых примерах создания веб страниц

Изучаем самостоятельно основы языка HTML

18 декабря, 2017 Максим Метелев 5853 просмотров Комментариев нет

Всем привет друзья. Продолжаем изучение и сегодня у нас еще один небольшой практикум по закреплению знаний и мы на простых html примерах научимся новым приемам работы с этим языком разметки страниц. Если в этом уроке вы встретите незнакомые вам теги, то не переживайте. Мы дадим объяснение в последующих статьях.

Документы HTML

Все документы в html начинаются с объявления типа документа, обозначаемого <!DOCTYPE html>

Сам документ HTML начинается с <html> и заканчивается </ html> . Видимая часть документа HTML находится между <body> и </ body> .

Пример:

<!DOCTYPE html>
<html>
<body>

<h1>Этой мой первый заголовок</h1>
<p>Мой первый параграф</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>Этой мой первый заголовок</h1>

<p>Мой первый параграф</p>

</body>

</html>

Попробуйте сами прямо сейчас. Можете использовать для помощи текстовые редакторы из предыдущей статьи.

HTML заголовки

Все заголовки на странице определяются следующими тегами начиная с <h1> до <h6>

<h1> определяет наиболее важный заголовок, который должен встречаться ТОЛЬКО ОДИН РАЗ на странице. <h6> определяет наименее важный заголовок:

<h1>Это заголовок h1</h1>
<h2>Это заголовок h2</h2>
<h3>Это заголовок h3</h3>

<h1>Это заголовок h1</h1>

<h2>Это заголовок h2</h2>

<h3>Это заголовок h3</h3>

Пример HTML заголовка от самого большого до самого маленького

HTML параграф

Данные элемент html страницы определяется тегом <p>

Пример:

<p>Это первый параграф</p>
<p>Это второй параграф.</p>

1 2	<p>Это первый параграф</p> <p>Это второй параграф.</p>

HTML параграф

HTML ссылки

Определяются через тег <a>

Пример:

<a href="https://smarticle.ru">Это ссылка на главную страницу блога</a>

1	<a href="https://smarticle.ru">Это ссылка на главную страницу блога</a>

Пункт назначения ссылки указан в атрибуте href.

Атрибуты используются для предоставления дополнительной информации об элементах HTML:

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

Все картинки, изображения определяются через тег <img>

У любой картинки есть источник (src), альтернативный текст (alt), длина задаваемая через width, высота через атрибут height

Пример изображения в html

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

1	<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

В браузере выглядит вот так:

Пример HTML тега изображения

Вот видите, какой получился короткий урок по основам языка HTML, впереди нас ждут более интересные и сложные примеры и потихоньку вы научитесь всем премудростям и тонкостям разработки простых и сложных проектов. Всем спасибо за внимание и я жду Вас в следующем выпуске. До скорой встречи!

Рубрики: Обучение html