Как сделать простой HTML-сайт?

01.06.2020
Статьи & Больше… 'Как сделать простой HTML-сайт?
0 7 мин.


HTML или Язык гипертекстовой разметки это, как следует из названия, язык разметки. Он не считается языком программирования в традиционном смысле. Это язык, на котором создатель может создавать документы и отмечать различные части с помощью тегов HTML.. HTML был вдохновлен SGML, и его первая версия появилась в 1990 году в ЦЕРН.

Первоначально HTML был разработан для простых статических документов, еще тогда, когда Всемирная паутина рассматривалась как система поиска документов. В настоящее время почти каждая веб-страница использует HTML, и он стал языком Интернета. Последняя итерация – HTML5, которая поддерживается всеми основными браузерами и является усовершенствованием HTML 4, который был «стандартизирован» в 1997 году..

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

Почему вы должны изучать HTML?

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

Часто люди добавляют плагины / модули / расширения в CMS, такие как WordPress, Drupal, Joomla и т. Д., Чтобы расширить их с помощью простой функции, которая могла бы быть достигнута с помощью нескольких строк HTML. Хотя плагин может быть проще, он может увеличить время загрузки страницы, и это просто еще одна вещь, о которой нужно беспокоиться с точки зрения безопасности и обновлений..

Изучать HTML довольно легко, и это может быть очень весело, потому что вы сразу видите результаты, в отличие от языка программирования, где вам нужно скомпилировать написанный код. У вас уже есть все инструменты, необходимые для начала изучения HTML, у вас есть веб-браузер и у вас наверняка есть простой текстовый редактор, такой как блокнот. Такие приложения, как Microsoft Word, этого не сделают, вам понадобится простой текстовый редактор: блокнот, блокнот ++. Существуют так называемые IDE (интегрированная среда разработки), которые помогут вам в написании HTML с такими функциями, как подсветка синтаксиса или автозаполнение.

Привет мир!

Вы можете загрузить бесплатный текстовый редактор, например Notepad ++ или Sublime Text Editor, и запустить его. Сохраните пустой файл на рабочем столе как «hello.html». Это изменит редактор в режиме HTML, чтобы вы могли пользоваться преимуществами IDE. Теперь идите вперед и введите следующий текст:

Привет мир!

Привет мир!

Сохраните файл, а затем откройте его с помощью веб-браузера. Это было совсем не сложно, верно? Вы можете изменить файл, сохранить его и обновить страницу в своем браузере, и вы увидите все изменения, которые вы сделали. Вам не нужно бояться, вы никак не можете повлиять на вашу операционную систему. Вы не можете удалять файлы или вещи такого рода. И не бойтесь неудач, как говорится: «Мастер потерпел неудачу больше раз, чем новичок даже пытался».

Основы HTML и 101

Основы HTML 101

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

    может содержать элементы списка

  • в этом. Тег абзаца

    может содержать тег новой строки
    , якорный тег , смелый , курсивный , и т. д. теги.

    В нашем примере основной тег HTML содержит тег head и тег body. В теге head мы можем указать заголовок документа, который будет отображаться в заголовке вкладки браузера. В теле у нас есть тег H1 или тег Heading 1.

    HTML-теги могут иметь атрибуты, которые могут изменить поведение тега, например, мы можем добавить атрибут «style» в наш H1, чтобы указать его стиль. Если мы добавим style = ”color: red”, то получится

    Привет мир!

    мы можем изменить его цвет с черного на красный по умолчанию. Конечно, при стилизации веб-страницы наши элементы один за другим могут стать проблематичными, и это будет загромождать наш HTML. Лучшим методом было бы присвоить элементу атрибут или идентификатор класса, а затем указать его стиль с помощью этого класса или идентификатора..

    Есть много Учебники HTML и ресурсы в Интернете, вы можете посмотреть учебники на YouTube или The Great Curses Plus или прочитать одну из тысяч статей в Интернете о HTML.

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

    Стилизация и скриптинг

    Чистая HTML-страница статична. Это означает, что он не может содержать динамически изменяющиеся части, например, «Наши последние новости». Если вы создаете веб-сайт с новостным разделом, который постоянно обновляется, то создание статей с последующим обновлением ссылок на них может стать довольно сложной задачей..

    С другой стороны, если вы создаете визитную карточку или сайт типа «обо мне» в HTML, который меняется не так часто, возможно, один или два раза в месяц, тогда статический веб-сайт HTML идеален. Так как он не имеет «движущихся» частей, таких как база данных, обработка на стороне сервера (PHP, Python, Ruby и т. Д.), Есть меньше проблем, и он также невероятно быстр.

    Вы можете сделать статическую страницу динамической, добавив JavaScript (ECMA Script чтобы быть точным) к нему, который является языком программирования сценариев. С помощью JavaScript вы можете реагировать на ввод пользователя, скрывая или показывая некоторые части HTML-кода, а также изменять внешний вид веб-страницы. С AJAX, вы можете запросить дополнительные ресурсы на своем веб-сайте, такие как подстраницы, контактную форму или ваши последние твиты, и можете включить их в свой веб-сайт.

    Стандартные стили HTML довольно скучны, это черный текст на белом фоне. Вы можете изменить стиль любого элемента HTML с помощью CSS (каскадные таблицы стилей). В HTML у вас нет контроля над тем, как будет отображаться ваш документ, это особенность HTML, а не недостаток. С помощью CSS вы можете попытаться быть более точным, но у вас все равно не будет 100% контроля. Некоторые браузеры будут работать немного иначе, чем другие. Текущая версия CSS, которая поддерживается всеми основными браузерами, является CSS3 и имеет много полезных функций, которых не хватало в предыдущем стандарте..

    Чтобы понять CSS, вы должны начать с блочной модели, это избавит вас от путаницы в начале, и вам важно понять разницу между рамкой, отступами, полями и т. Д. CSS довольно легко изучить и Как и в случае с HTML, вы сразу увидите изменения, которые вы внесли. Как уже упоминалось, вы можете добавить элемент id или class в любой тег HTML и написать правила CSS для этих идентификаторов и классов. Чтобы вернуться к нашему примеру, в разделе заголовка, если мы напишем следующий текст,

    тело {

    Цвет фона: синий;

    }

    он изменит белый цвет документа по умолчанию на синий.

    С CSS нужно иметь в виду, что существует множество специфических для браузера тегов, поэтому убедитесь, что вы тестируете свой веб-сайт с использованием различных браузеров или хотя бы Google Chrome, Mozilla Firefox, Internet Explorer 11 и Edge. Не повредит и быстрый просмотр некоторых мобильных браузеров, особенно Safari IOS.

    Вывод

    Изучение HTML и CSS проще, чем большинство языков программирования, и это может быть очень полезным опытом. С помощью HTML вы сможете создавать веб-страницы именно так, как вы хотите, без каких-либо компромиссов, как в случае с CMS. Создание HTML-сайтов позволит вам разместить их где угодно, и они будут очень быстро загружаться и работать плавно.

    Даже с появлением всех типов конструкторов веб-сайтов «сделай сам», HTML не может считаться устаревшим. Он лежит в основе каждого веб-сайта, и даже с помощью мощных CMS и инструментов для создания веб-сайтов, которые позволяют создавать профессионально выглядящий веб-сайт без каких-либо знаний в области кодирования, вы можете внести некоторые изменения на свой сайт, чтобы получить вещи именно так, как вы хочу, чтобы они были. Изучение некоторого HTML позволит вам сделать это.

    Знание основ HTML может быть полезным навыком для всех, а не только для тех, кто планирует карьеру в IT. Те, кто работает с веб-контентом, онлайн-маркетингом, переводом и всеми, кому требуется присутствие в Интернете, получат ускоренный курс по HTML.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Оцените статью
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector