Приветствуем!
Первый раз с этого устройства? Рекомендуем зарегистрироваться или войти чтобы открыть для себя более большой спектр возможностей!
Обновите, чтобы удалить сообщение

Вкратце об основах
31.08.2016 10:59, HTML


Приветствую читателей, или вернее, новичков веб-программирования! В статье вы прочтете самые основы веб-языка (хотя, скорее, разметки) - HTML

1. Давайте начнем с краткой предыстории: как появился HTML?
Аббревиатура HTML расшифровывается как Hyper Text Markup Language что означает "Язык ГиперТекстовой Разметки"
Создатель - Тим Бернерс-Ли
Первая версия появилась ещё в далеком 1995 году
Лично по мне, HTML - простейший из всех языков программирования которые я изучал, поэтому изначально вам придется запомнить только синтаксис, а остальное - приложится
HTML тесно связан с языком CSS, так как без него хорошо оформить сайт - нереально, но желательно изучать эти языки по отдельности

2. Подготовка к разработке
Если вы ещё не готовы разрабатывать свой сайт, то вот вам небольшой список программ, которые по мере разработки очень понадобятся:
1. Текстовый редактор (конечно желательно иметь валидатор, например Notepad++)
2. Браузер для просмотра сайта (я пользуюсь Google Chrome, но для проверки "кроссбраузерности" рекомендую скачать все популярные)
3. Если хотите разрабатывать сайт локально, то Denwer (если нет - хостинг и домен)
4. Графический редактор (хоть и не такая важная вещь, но иногда нужен, рекомендую скачать хорошую программу, например Adobe Photoshop или Corel Draw, а не пользоваться Paint'ом)
5. Удобный проводник (например Total Commander, хоть и сам я использую Windows'овский проводник)
6. Если хотите систематизировать действия - СКВ (желательно Git, сам использую)
7. Нет возможности просмотреть реальный код - используйте специальные сервисы (например JsFiddle)
8. Желание разрабатывать (в примере не нуждается)

3. Итак, после того как вы подготовились, можно начать изучать синтаксис
Вообще что такое синтаксис языка? В великом и могучем этот отдел изучает построение предложений, и в языках программирования примерно тоже самое, т.е. синтаксис означает построение понимания кода языком
В HTML'е выделить синтаксис очень легко: все элементы заключаются между фигурных скобок (<пример>), а их атрибуты - после названия элемента с их значением (<пример год="365">)
Кстати, обратите внимание на то, что даже все числовые значения атрибутов в HTML'е заключаются в двойные или одинарные кавычки
Существует два типа элементов: одинарные и блочные
В теории одинарные добавляют на страницу такой элемент, который несет в себе мало информативности и не имеет текста, например изображение (<img src="Images/Vovka.gif">)
Также, в отличии от блочных элементов, одинарные не нуждаются в "закрывающем теге"
Блочные элементы имеют синтаксис <пример>я текст</пример>, и обычно используются для распределения текста
Заметьте, что все "закрывающие теги" после скобок имеют знак слэша (/)
Запомните, что "по стандарту" страница веб-сайта должна иметь следующий вид:

<!DOCTYPE %уровень валидации, обычно просто "HTML"%>
<html>
<head>
%"заголовки страницы" - самая важная информация о странице%
</head>
<body>
%контент страницы%
</body>
</html>
Наверное для непосвященных сначала это покажется сложным, но это только в теории
На самом деле в HTML'е ничего сложного нет, думаю после примеров станет намного яснее

4. Для тех кто хочет примеров - вот и они
1. Пример простейшей страницы с абзацем наверху
<!DOCTYPE HTML> <!-- тип валидации документа, сначала забудьте об этом, ставьте "HTML" -->
<html> <!-- блок основного содержимого -->
<head> <!-- блок главного содержимого -->
<title>Привет, мир!</title> <!-- надпись во вкладке страницы -->
</head>
<body> <!-- контент -->
<p>Привет, мир! Это моя первая страница на HTML!</p> <!-- тег абзаца (paragraph) -->
</body>
</html>
2. Страница-справка с заголовками и отцентрированием
<!DOCTYPE HTML>
<html>
<head>
<title>О HTML</title>
</head>
<body>
<center> <!-- блок отцентрирования -->
<h1>О HTML</h1> <!-- блок заголовка, число 1 означает размер -->
<p>Здесь вы прочтёте о языке веб-программирования HTML</p>
<h2>Расшифровка</h2> <!-- еще один, запомните, что числа и размеры идут в обратном порядке -->
<p>HTML - Hyper Text Markup Language</p>
<h2>Значение</h2>
<p>С помощью HTML'я разрабатывают сайты</p>
</center>
</body>
</html>
3. Список продуктов
<!DOCTYPE HTML>
<html>
<head>
<title>Список покупок</title>страницы
</head>
<body>
<center>
<h1>Это список покупок для Васьки, не забудь сходить в магазин!</h1>
<ul> <!-- добавляет на страницу "маркированный список" -->
<li>Хлебушек</li> <!-- означает элемент списка, блок нельзя использовать вне родительского блока <ul></ul>
<li><s>Квас</s></li> <!-- блок "<s>" делает текст зачеркнутым -->
<li>Молоко, <b>3 упаковки</b></li> <!-- "<b>" делает текст жирным -->
<li>Конфеты "<font color="red">Красная долина</font>"</li> <!-- блок "<font>" позволяет изменить некоторые характеристики текста, например размер или цвет -->
<!-- атрибут "color" задает цвет, аргумент "red" - значит красный -->
</ul>
</center>
</body>
</html>
Заметьте, что размещения одних блоков внутри других совмещает их значение

Думаю самые основные основы изучены, для этой статьи это всё, если вы всё же заинтересовались HTML'ем, на нашем форуме вы можете найти ещё кучу интересных, а главное полезных статей!
Спасибо за внимание!

Даниил Константинов (Россия, 953, Администратор)


Комментарии:

К этой статье комментариев не найдено
Опередите всех, напишите первым(ой)!


Чтобы оставить комментарий вам нужно зарегистрироваться или войти

Кажется ваш браузер - не Google Chrome или Internet Explorer 11.
Последствием этого может быть некорректное отображение страниц сайта.
Не показывать

Ссылки на страницы сайта:

(последнее обновление страницы - 23:28:29 Мск)

Sitetopbox
Sorogin OC
Sorogin engine

Sorogin Labs
Бизнес с компанией
Вебмастерам

Виртуальная комната
Журнал
Основной сайт

Рабочий стол
Терминал
Техподдержка


Здесь вы можете разместить свою рекламу от 4 рублей обратившись по адресу sorogincompany@gmail.com
Besucherzahler
счетчик посещений