HTML — это и есть веб / Хабр
Что нынче с HTML во фронтенде? В последнее время я разговаривал со многими разработчиками. Похоже, что некоторые даже не разбираются в HTML. В смысле, кое-что они понимают. Они понимают, что такое div и что такое span, и когда всё выглядит хорошо и работает по щелчку, им этого хватает. До такой степени, что многие на вопрос о HTML отвечают: «О, да я сейчас всё делаю в React или Vue». Но на самом деле не имеет значения, что вы пишете только Javascript. Если вы разрабатываете веб-сайты, то HTML — это самое главное для вас. Это и есть веб.
Речь о том, что потребляется пользователем. Это UI и UX. Вот весь пакет. В порядке убывания важности: HTML, CSS и поведение (которое может быть обеспечено Javascript — а может и нет).
Я вижу проблему внизу этой технологической пирамиды. Наименьший общий знаменатель Сети. Основа. Ритм-группа. Савоярди всех десертов веба. Это HTML. И мне всё больше кажется, что целый пласт фронтенд-инженеров не знают или не понимают главной технологии фронтенда.
Веб-страница — это документ. Любой компонент, будь то шаблон блога, новостной сайт, панель маркетинговой статистики или регистрационная формы — это часть документа. У документов есть структура. В интернете речь идёт не только о визуальных элементах или архитектуре, что предоставляет ваша платформа. Речь идёт о выборе семантически правильных элементов, чтобы ваша веб-страница, компонент, что угодно, была правильно структурно отформатирована. Заголовки должны быть заголовками, списки должны быть списками, кнопки должны быть кнопками, а таблицы должны быть таблицами. Вы можете стилизовать их (в значительной степени), как вам нравится — заголовок не обязан быть большим и жирным с отступом внизу. Это зависит от вас, но это определённо должен быть заголовок, и я могу с вами подраться, если сделаете его как
div.HTML ведь не так трудно выучить, особенно если вы уже знаете JavaScript-фреймворки. Я не считал, но вполне уверен, что там всего около 116 элементов, и большинство вам никогда не понадобится.
Я из тех ребят, которые работают на самом краю фронтенда. Я занимаюсь HTML и CSS, поэтому мне легко призывать всех выучить то, что я уже знаю (для записи, я не знаю всего — у нас в офисе по-прежнему идут горячие дебаты, как лучше всего пометить определённый компонент). Дело не в том, что моя работа важнее вашей. Если вы пишете код, который что-то отображает в браузере, то это однозначно ваша работа.
Речь идёт о юзабилити и доступности. Если вы не считаете важной семантическую структуру вашей веб-страницы или приложения, по сути, вы говорите: «Ну, у меня всё работает, можно выпускать». Не думаю, что Javascript здесь достаточно, как и CSS. Поисковые системы должны читать ваш контент, а не наслаждаться стремительными анимациями или причудливыми градиентами. Скрин-ридер должен читать ваш контент. Пользователи без мыши должны работать с вашим сайтом. Кто знает, какая технология будет следующей и как она воспримет ваше приложение, но готов поспорить на последний биткоин, что ей наверняка поможет возможность легко читать, анализировать и перемещаться по контенту.
«Но мой фреймворк берёт всё на себя. Я просто пишу шаблоны .jsx»
Нет. Напишите правильный HTML в своём JSX. Вы можете это сделать. Просто потому что вы используете React или Vue или что-то ещё, вы не обязаны всё писать div’ами. Не обязаны.
«Эта библиотека везде добавляет атрибуты WAI-Aria, так что с доступностью всё в порядке»
Отлично. Если бы вы написали правильный HTML, большинство этих атрибутов вообще не понадобилось бы. Вы бесплатно получаете целую кучу функций accessibility, просто используя реальный button вместо div с обработчиком событий onClick.
БЕСПЛАТНО. Это доступность, производительность и удобство для пользователя, бесплатно. БЕСПЛАТНО!
Это действительно важные вещи. Если их не соблюдать, это медленно (на самом деле не так медленно) ломает веб. По крайней мере, делает его менее доступным для людей, которые будут использовать ваш продукт. Если вы называете себя фронтенд-инженером, то ваша ответственность — узнать и использовать основы веба, общие для всех браузеров, платформ, устройств или бытовых приборов, которые могут получить доступ к интернету.
Пожалуйста, сделайте это. Сделайте интернет лучше, ответственно подойдите к разработке. В Сети достаточно ресурсов, которые могут помочь, вот несколько для начала:
- Узнайте, как разметить документ в HTML. Попробуйте простые мысленные упражнения, когда смотрите на концертный плакат или газетную страницу — и представляете, как она будет структурирована в HTML. Если есть время, напишите этот HTML. Используйте эти знания в повседневной работе.
- MDN — отличный ресурс с блогами, учебниками и полезными ссылками.
- Обратитесь к людям в сообществе. Читайте блоги (например, недавний пост Энди Белла об использовании семантического HTML) и смотрите видео.
- Когда я учился, просмотр исходников был ещё полезен. Мы коллективно сломали это для нынешнего и будущих поколений, но могу впечатлить вас мощью «Инструментов разработчика» в браузере
- Узнайте, как работают в вебе ассистивные технологии
- Посмотрите на спецификации HTML или даже просто на список HTML-элементов и примеры их использования
- Если вы работаете в команде, обсудите разметку. Реально поспорьте, будет правильно вставить какой-то элемент в виде
tableилиdl(Description List Element, MDN). Будет очень весело, обещаю. - Узнайте, кто в вашей команде лучший знаток HTML, и попросите его просмотреть ваш код. Если это я, всегда рад поговорить.
HTML — это язык программирования?
Короткий ответ: наверное, нет.
HTML (язык гипертекстовой разметки) не является языком программирования, как следует из названия, это язык разметки (как описано ниже). Проще говоря, HTML — это код, описывающий, как выглядит конкретная веб-страница. HTML также может содержать форматирование своих элементов, таких как размер шрифта, цвет, стиль, цвет фона, расположение и многое другое. Но в современной веб-разработке мы помещаем этот код стиля в отдельный файл, который называется CSS (каскадная таблица стилей). Итак, в то время как HTML определяет структуру страницы, CSS придает ей стиль. Но вы не можете указать компьютеру выполнять с ними процедуры, например, вы не можете определять циклы, выполнять ветвление с помощью if / else, объявлять функции, обрабатывать события и многое другое.
Что такое наценка?
Представьте, что на вашем веб-сайте вы хотите, чтобы текст «Добро пожаловать на мой веб-сайт» был размером 18 и красным цветом. Теперь, как мы можем сказать компьютеру, что нужно хранить эти данные форматирования? Мы можем сделать это с помощью языка разметки, используя так называемые теги (специальные символы).
подобно
<p color:red”>Добро пожаловать на мой сайт</p>.
В приведенном выше примере мы говорим компьютеру, что «Добро пожаловать на мой веб-сайт» — это абзац, потому что он окружен <p></p> теги (часть HTML). Добавляя style = "font-size: 18px цвет: красный" код, мы также сообщаем компьютеру стиль этого абзаца (часть CSS). Просто, не правда ли? Когда наши коды HTML / CSS становятся больше, очень практично хранить эту информацию о стилях в отдельном файле под названием CSS (Cascaded Style Sheet).
Итак, HTML-код определяет структуру, т.е. сообщает, что здесь будет абзац с определенным текстом внутри:
<p>Добро пожаловать на мой сайт</p>
И код CSS сообщает, как этот абзац должен быть отформатирован:
п{размер шрифта: 18 пикселей;
красный цвет;
}
Такие браузеры, как Chrome, Safari, Firefox, Edge и т. Д., Знают, что любой текст, заключенный в <p></p> Тег должен быть размером 18 пикселей и окрашен в красный цвет и отображать этот текст именно таким образом для пользователя.
Вот и все!
Итак, какие же тогда языки программирования?
Проще говоря, мы имеем дело с языком программирования, когда мы можем определять переменные, сохранять и считывать с ними значения, записывать функции, циклы записи, операторы if, обрабатывать такие события, как нажатие кнопки, и многое другое. Поскольку HTML / CSS не может выполнять ничего из описанного, мы оживляем наши веб-сайты, добавляя код JavaScript (JS). JS — это язык сценариев (программа, которая служит для определенной цели), который изначально использовался только для интерфейсной разработки (это то, что вы видите и можете взаимодействовать прямо сейчас на этом веб-сайте). На внутренней стороне (все, что происходит на сервере, и вы, как пользователь, не можете этого видеть) мы используем языки программирования (соответствующие фреймворки показаны в скобках), такие как Java (Spring), C# (ASP.NET), PHP (Laravel), Python (Flask, Django), Ruby (Rails), а теперь еще и JavaScript с его относительно новым фреймворком Node.
JS (проще говоря, реализация языка JavaScript для серверной части).
Посмотрите мое краткое визуальное объяснение разницы между HTML, CSS и JS.
Ссылка на мой онлайн-курс: https://online.datorium.eu
Просмотры сообщений: 6 573
Без категории
Pamācība skolēniem par Datorium mācību platformas izmantošanu
Piedaloties Datorium skolas nodarbībās, Tu izmantosi mūsdienīgas mācību platformas: Lai uzsāktu darbu Tev jāveic reģistrācijas un verifikācijas šajās platformās. Šajā rakstā Tu atradīsi Precīzas Instrukcijas,
Datorium 10 октября 2021 г.
Без категории
Iespēja meitenēm vecumā no 14-19 gadiem iemācīties programmēt ar Python
Jauniešu programmēšanas skola Datorium sadarbībā ar informāciju tehnoloģiju uzņēmumiem Google и TietoEVRY излучает pyteikšanos Python programmēšanas valodas kursam PyGirls. Šis kurss ir īpaši izstrādāts ar
Datorium 11 октября 2021 г.
Что такое HTML?
HTML означает язык гипертекстовой разметки.
Он состоит из ключевых слов и команд, которые веб-дизайнеры используют для создания веб-сайтов.
Гипертекст — это текст со ссылками, по которым читатели могут просто щелкнуть, чтобы перейти на другую страницу или другую часть страницы. Между тем язык разметки использует теги или обычный текст со специальной маркировкой для определения разделов страницы, таких как верхние и нижние колонтитулы, и других элементов, включая таблицы и изображения.
HTML считается одним из трех основных инструментов при создании веб-страниц: HTML обеспечивает структуру или способ отображения текста, изображений и т. д. на веб-сайте. CSS (каскадные таблицы стилей) устанавливает визуальные свойства этих элементов, такие как цвета, формат и макет. Между тем, Javascript заставляет эти элементы вести себя определенным образом в зависимости от действий пользователя. Например, размер шрифта текста может увеличиваться, когда пользователи наводят указатель мыши или нажимают кнопку на странице.
Чтобы написать HTML , вам понадобится текстовый редактор, например Блокнот, Brackets или Atom. Редакторы HTML гарантируют чистоту и функциональность кода. Они помогают уменьшить количество ошибок за счет автоматической вставки тегов (автозаполнение) и других общих элементов или путем отладки.
Для чего используется HTML?
HTML — язык по умолчанию для веб-сайтов и веб-документов. Это помогает браузеру понять структуру и стиль документа или файлов для просмотра через Интернет. Он позволяет размещать на ваших веб-страницах аудио, видео, электронные таблицы и другие приложения. Это также облегчает навигацию по веб-страницам или между веб-сайтами с помощью гипертекста.
Кроме того, создатели веб-сайтов могут использовать HTML для разработки форм для заказа товаров, бронирования или поиска информации. Таким образом, HTML является основным строительным блоком для создания вашего бренда и запуска сайта электронной коммерции или онлайн-бизнеса на основе подписки.
Из чего состоит документ HTML?
Основными компонентами документа HTML являются теги и элементы. Они сообщают вашему браузеру, как отображать ваш контент. Теги начинаются и заканчиваются угловыми скобками или знаками «меньше» и «больше». Буквы между ними называются содержимым элемента.
Следующие элементы составляют основную структуру HTML-страницы (в порядке их появления):
появляется в начале или в самом верху HTML-документа. Он сообщает браузеру, какая версия HTML использовалась для создания страницы.
- Корневой элемент HTML
, написанный под DTD, действует как «главный контейнер», содержащий все остальные элементы. Он может указать язык документа HTML. Например, означает, что страница написана на американском английском.
- Головка
К ним относятся: -
</b> или общая тема веб-страницы. Он отделен от тега заголовка, который появляется в теле, но должен совпадать с ним.</li><div id="yandex_rtb_2" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_2",blockId:rtbBlockID,pageNumber:2,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_2").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_2");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> <li> <b><style></b>определяет,как элементы должны отображаться в браузере. Это включает в себя цвет заголовка,выравнивание текста,цвет фона тела и так далее. </li><li><b><ссылка></b>указывает ресурсы (например,другую веб-страницу или внешнюю таблицу стилей),связанные с HTML-страницей. </li><li><b><meta></b>содержит ключевые слова,автора и описание страницы. </li><li><b><base></b>относится к URL-адресу по умолчанию. </li></ul><ul><li><h4></h4><b>Корпус </b></h4></li></ul><p><body>— это основная часть документа,содержащая информацию,которую браузер отображает на экране. Он может включать следующее:</p><ul><li>Заголовок <b></b>содержит заголовок сайта,логотип,основную навигацию и панель поиска. </li><li>Основное содержание <b></b>охватывает название или заголовок статьи,содержание статьи,дату публикации,автора и т.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/7/1/f/71fd7845289bce4a37a8a2e4edd53fb0.jpeg'/><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/7/1/f/71fd7845289bce4a37a8a2e4edd53fb0.jpeg'/></noscript><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>д. </li><li>Боковые панели <b></b>отображают виджеты и вторичную навигацию,например архивы по категориям или датам. </li><li>Нижний колонтитул <b></b>предлагает контактную информацию,ссылки на социальные сети,авторские права и третичную навигацию. </li></ul><hr/><h3></h3><b>Как работает HTML? </b></h3><p>Автор веб-сайта вводит HTML-документ,сохраненный с расширением .html или .htm (имя файла.html или имя файла.htm). Затем этот файл загружается во всемирную паутину,чтобы показать,как он выглядит в Интернете. </p><p>Чтобы открыть HTML-файл со своего ПК,перейдите в проводник,щелкните файл правой кнопкой мыши (или дважды щелкните его,если вы используете Mac) и выберите «Открыть с помощью» в меню для запуска в предпочитаемом вами браузере. Google Chrome,Mozilla Firefox,Safari и другие браузеры могут распознавать и читать этот формат. Вы также можете запустить браузер,нажать Ctrl+O,чтобы открыть меню «Открыть»,и дважды щелкнуть свой html-файл. </p><p>Браузеры используют элементы HTML для интерпретации содержимого страницы и правильного отображения его на экране в аккуратном и отформатированном виде.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/t/Tz2ZP9IWuHyRVrmStGxv301kL8d5psNXloKbaM/slide-20.jpg'/><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/t/Tz2ZP9IWuHyRVrmStGxv301kL8d5psNXloKbaM/slide-20.jpg'/></noscript><div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> </p><h4><span class="ez-toc-section" id="i-4">РЕКОМЕНДУЕТСЯ </span></h4>электронная коммерция <p>Недавний отчет HubSpot показал,что только 15% веб-сайтов получают в среднем более... </p>рекламная рассылка <p>Искусственный интеллект (ИИ) стал более точным в последние годы,и маркетинг... </p>Социальные медиа <p>Если вам больше не нравятся лайки в Instagram или вы никогда не любили их с самого начала... </p><h2><span class="ez-toc-section" id="_HTML-2">Что такое HTML и как он используется? </span></h2><p>HTML — это язык разметки,который разработчики веб-сайтов используют для создания всех веб-страниц,которые вы найдете в Интернете. </p><p>HTML — это язык разметки,который разработчики веб-сайтов используют для создания всех веб-страниц,которые вы найдете в Интернете. </p><h3><span class="ez-toc-section" id="_HTML-3">Что такое HTML? </span></h3><p>HTML означает язык гипертекстовой разметки. Он определяет макет и структуру веб-страницы с помощью «тегов» форматирования внутри квадратных скобок,состоящих из символов меньше «<» и больше «>». </p><p>Каждый элемент веб-страницы содержит специальную метку,которая сообщает браузеру,как форматировать или структурировать этот раздел страницы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/v/VuZh5TH2eaOivK6tkoWI0Nd9CnyUYXcAEFpjGx/slide-1.jpg'/><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/v/VuZh5TH2eaOivK6tkoWI0Nd9CnyUYXcAEFpjGx/slide-1.jpg'/></noscript>Таким образом,вся веб-страница представляет собой просто набор этих элементов. </p><p>Например,одна из самых простых веб-страниц будет содержать:</p><ul><li><strong><html></strong>:Отмечает начало и конец файла HTML </li><li><strong><head></strong>:Отмечает начало и конец веб-страницы информация заголовка </li><li><strong><title></strong>:Отмечает заголовок,который должен отображаться в строке заголовка браузера. </li><li><strong><body></strong>:Отмечает начало и конец содержимого веб-страницы. документа от большого (h2) до очень маленького (H6) </li><li><strong><p></strong>:Вставляет разрыв абзаца как два возврата каретки (один пробел между строками) </li><li><strong><br></strong>:Вставляет разрыв строки (без пробела между строками) строк) </li><li><strong><b></strong>:выделение текста между тегами жирным шрифтом </li><li><strong><em></strong>:выделение текста между тегами курсивом </li><li><strong><noscript><img class="lazy lazy-hidden" src></noscript><img class="lazyload lazy lazy-hidden" src><noscript><img src></noscript></strong>:вставка изображения везде,где существует этот тег></strong>:Вставляет ссылку на другую веб-страницу внутри документа.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/g/GZhWxujOQrDzpV1K6HlweAv4X8bJNnIYts0gLBkfM/slide-1.jpg'/><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/g/GZhWxujOQrDzpV1K6HlweAv4X8bJNnIYts0gLBkfM/slide-1.jpg'/></noscript></li></ul><p>Существует много других тегов HTML,которые вы можете использовать,но приведенные выше являются наиболее распространенными на большинстве веб-страниц в Интернете. </p><h3><span class="ez-toc-section" id="_HTML-4">Пример файла HTML </span></h3><p>Для создания собственной веб-страницы не требуется опыта программирования. На самом деле,вы можете прямо сейчас открыть Блокнот,набрать простой текст и сохранить его как файл .html или .htm. Это может быть первая веб-страница,которую вы когда-либо создавали,и все,что вам нужно,это ваш собственный компьютер. </p><p>Ниже приведен пример очень простого HTML-файла. </p><p><em><!DOCTYPE html></em><br/><em><html lang="en"></em></p><p><em><title>Заголовок веб-страницы Это первый заголовок
Это мой первый абзац.
Это вторая строкаЭто еще один абзац.
Вот как работает гипертекстовая разметка:
- 9004 Первые две строки сообщить браузеру,что документ находится в формате HTML и что язык английский.
- Заголовок страницы,заключенный в
и ,устанавливает веб-страницу для отображения в браузере как «Заголовок веб-страницы». - Раздел,заключенный в и ,сообщает браузеру,что эти строки содержат содержимое для отображения на веб-странице.
- Заголовок,заключенный в теги
и
,создает текст «Это первый заголовок» с использованием самого большого шрифта заголовка,доступного в HTML. - Теги
и
вставляют пробел после тега . - Тег
вставляет одиночный разрыв строки после этого предложения. - завершает документ,и на этом этапе загрузка веб-страницы прекращается.
- Элемент 1
- 8Item 94
- Элемент 3
Вот файл веб-страницы выше,когда вы открываете его в своем браузере.
Как видите,создать веб-страницу просто,даже если у вас нет веб-сервера. Все,что вам нужно,это создать файл HTML и загрузить его с помощью
How HTML Works
Очевидно,что большинство страниц не хранятся на вашем компьютере.
Вместо этого они хранятся на веб-серверах в Интернете. Таким образом,когда вы посещаете статью или другой контент на любом веб-сайте,сервер отправляет вашему браузеру файл .html,содержащий контент для этой страницы.
Вы можете просмотреть HTML-код любой веб-страницы в браузере Chrome,щелкнув правой кнопкой мыши в любом месте страницы и выбрав Просмотреть исходный код страницы .
Это покажет вам код веб-страницы. Вы можете видеть,что это файл HTML по первому тегу в верхней части файла.
Однако вы также заметите,что исходный код содержит теги других типов,которые вообще не являются тегами HTML.
Встроенные сценарии в файлы HTML
Например,вы можете увидеть код,который вызывает файлы .php или .js. Это сценарии PHP и Javascript,которые позволяют динамическим веб-страницам загружать различное содержимое в зависимости от ввода пользователя или вывода других сценариев,которые выполняются на веб-сервере или в браузере,и доставляют содержимое в тот же HTML-файл,который читает ваш браузер.
Поскольку HTML — это «статический» метод,используемый для форматирования контента на веб-странице,веб-дизайнерам нужен более динамичный способ изменения контента на странице в зависимости от того,где браузер наводит курсор или щелкает. Браузеры могут считывать и интерпретировать код Javascript,изменяя форматирование или другие элементы веб-страницы в зависимости от взаимодействия с пользователем.
Например,так меню на странице будет менять цвет при наведении курсора на каждый пункт меню.
Код PHP,встроенный в веб-страницу,позволяет правильно работать таким вещам,как динамические кнопки. Например,кнопка Комментарии в нижней части статей,которые вы увидите на этом сайте,управляется PHP-кодом,который работает на сервере и будет доставлять комментарии,размещенные в каждой статье.
PHP также позволяет веб-администраторам создавать инновационные функции,такие как бесконечная прокрутка,которая продолжает загружать новые статьи по мере прокрутки главной страницы сайта.
Благодаря современным веб-языкам сценариев,сегодняшние веб-страницы уже не просто статичны,что позволяет сделать только HTML-код.
Другие HTML-теги
Если вы готовы приступить к созданию собственных HTML-файлов,вам необходимо знать,как использовать наиболее распространенные HTML-теги,помимо базовых,описанных выше.
Ниже приведены несколько примеров дополнительных HTML-тегов,которые вы можете использовать при кодировании собственных веб-страниц.
HREF для вставки ссылок
Чтобы вставить ссылку на вашу веб-страницу,используйте a href .
Найдите свой iPhone с помощью Hey Siri
Это свяжет текст «Найти свой iPhone с помощью «Привет,Siri» с URL-ссылкой,которую вы включили в двойные кавычки после «href=».
IMG SRC для вставки изображений
Вы можете вставлять изображения на веб-страницу,используя img src .
Это позволит загрузить изображение my-picture.jpg из Интернета. server и отобразит его на странице,где вы разместили этот тег,с шириной 150 пикселей и высотой 120 пикселей.
Параметр alt отображает текст «моя фотография профиля» в браузерах,которые не могут отображать изображение. Если вы не включите параметр «стиль»,изображение будет отображаться в исходном разрешении,которое может быть слишком большим или слишком маленьким для области страницы,куда вы его встраиваете.
UL и OL для создания списков
Если вы хотите использовать маркированные или нумерованные списки в своем контенте,есть два тега,которые позволяют это сделать.
Следующий код вставит ненумерованный список (маркеры):
Используйте
- в начале списка и
Заключите каждый элемент в теги Вы можете использовать тот же подход для нумерованного списка,используя
- ,что означает «Упорядоченный список».
- Предмет 1
- Предмет 2
- 0148
Вставка таблиц
Веб-дизайнеры использовали большие таблицы для форматирования веб-страниц. Но с появлением каскадных таблиц стилей (CSS) в этом больше нет необходимости. Вместо этого файлы CSS хранятся на веб-сервере,и HTML-страницы вызывают эти файлы,чтобы определить,как форматировать такие вещи,как поля,размеры и цвета шрифта и многое другое.
Однако таблицы по-прежнему полезны для отображения таких вещей,как данные.
Чтобы вставить таблицу,заключите начало содержимого в
Заключите каждую строку в
Только с помощью этих основных элементов вы можете создавать полезные статические веб-страницы для отображения своего контента в Интернете.Name Address
< th>Номер телефонаРайан Дьюб 100 Джонс Лейн;Johnson City,TN 317-555-1212
на веб-страницу следующим образом: