Html Books

1. Выберите некоторый текст. Мы выбрали текст “Манифест Mozilla”.
2. Оберните текст в элемент , например так:

Mukammal dasturlash: HTML va CSS (1-kitob)

«Mukammal dasturlash: 1-qism» HTML va CSS Veb-dizaynerlikni noldan mukammallik darajasigacha batafsil o‘rgatuvchi qo‘llanma. Ma’lumotlar o‘n yildan ortiq amaliy ish jarayonlaridan orttirilgan tajribalar asosida sodda va tushunarli bayon etilgan. Kitob dasturlash sohasi ostonasida turgan yoshlarga mustaqil o‘rganishdagi dastlabki eng kerakli bilim va ko‘nikmalarni ulashadi.

78 O’qimoqchi
0 o’qiyapti

• Annotatsiya
• Qisqa ma`lumot
• Taqrizlar (0)
• Iqtiboslar (0)

«Mukammal dasturlash: 1-qism» HTML va CSS Veb-dizaynerlikni noldan mukammallik darajasigacha batafsil o‘rgatuvchi qo‘llanma. Ma’lumotlar o‘n yildan ortiq amaliy ish jarayonlaridan orttirilgan tajribalar asosida sodda va tushunarli bayon etilgan. Kitob dasturlash sohasi ostonasida turgan yoshlarga mustaqil o‘rganishdagi dastlabki eng kerakli bilim va ko‘nikmalarni ulashadi.

Kitob nomi:	Mukammal dasturlash: HTML va CSS (1-kitob)
Kitobning asl nomi:	Mukammal dasturlash: HTML va CSS (1-kitob)
Nashr qilingan til:	O’zbekcha
Kitobning asl tili:	O’zbekcha
Formati:	Qattiq/288
ISBN:	978-9943-6964-4-0
Nashr yili:	2021
Nashriyotchi:	Akademnashr
Seriya:	0
Yosh chegarasi:	16 dan 70 gacha

Taqrizlar

Hozirda ushbu kitobda taqrizlar mavjud emas.
Taqriz yozish

Iqtiboslar

Hozirda ushbu kitobda iqtiboslar mavjud emas.
Iqtibos qo’shish

Html Books

HTML & CSS Crash Course: Learn html and css with easy to follow-step-by-step tutorials

71 Pages · 2015 · 837 KB · 61,378 Downloads · New!
Overview: Learn HTML & CSS with the Ultimate Crash Course on HTML and CSS! Learn Fast With Step .

Web Design with HTML and CSS

307 Pages · 2011 · 24.12 MB · 235,760 Downloads
Web Design with HTML and CSS Digital Classroom. Published by. Wiley Publishing, Inc. 10475 .

Learn Enough HTML to Be Dangerous: An introduction to HTML

135 Pages · 2016 · 11.42 MB · 13,640 Downloads · New!

on the road to technical sophistication by learning this essential computer skill. Learn Enough HTML .

Html & Css

514 Pages · 2011 · 18.78 MB · 175,297 Downloads
to teach you about creating web pages, this book is Html & Css Html & Css Jon Duckett .

Programming: Programming QuickStart Box Set – HTML, Javascript & CSS (Programming, HTML, Javascript, CSS, Computer Programming)

223 Pages · 2016 · 775 KB · 12,178 Downloads · New!
Programming: Programming QuickStart Box Set – HTML, Javascript & CSS (Programming, HTML .

How to create Web sites and applications with HTML, CSS

329 Pages · 2009 · 10.03 MB · 76,985 Downloads

. Using an Open Source Design. How to create Web sites and applications with HTML, CSS Robert Schifreen .

New Perspectives on HTML, CSS, and Dynamic HTML

1,221 Pages · 2012 · 141.13 MB · 7,496 Downloads · New!

to learn to create simple to complex Web sites using HTML5, CSS3, and Dynamic HTML. New Perspectives .

Head First HTML and CSS: A Learner’s Guide to Creating Standards-Based Web Pages

764 Pages · 2017 · 47.11 MB · 60,538 Downloads · New!
Elisabeth_Robson,_Eric_Freeman_Head_First_HTML_a(z-lib_org).pdf Head First HTML and CSS Elisabeth .

Learn HTML and CSS: Learn to build a website with HTML and CSS

2016 · 5.18 MB · 18,202 Downloads · New!
Learn to build your own website with HTML and CSS. Discover how you can learn HTML and CSS .

Learn HTML and CSS with w3schools

240 Pages · 2011 · 2.51 MB · 55,096 Downloads
HTML and CSS. Hege Refsnes, Ståle Refsnes, Kai Jim Refsnes,. Jan Egil Refsnes with C. Michael .

Beginning HTML, XHTML, CSS and JavaScript

865 Pages · 2010 · 10.38 MB · 54,808 Downloads
Join the discussion @ p2p.wrox.com. Jon Duckett. Beginning. HTML, XHTML,. CSS, and JavaScript .

Head First HTML and CSS

116 Pages · 2012 · 21.69 MB · 42,795 Downloads

First PHP & MySQL. Head First Web Design. Head First HTML and CSS Head First HTML and CSS Elisabeth .

Learning Web Design : A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics

2018 · 76.02 MB · 130,792 Downloads · New!

to date. Read more. Learning Web Design : A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics .

Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics

952 Pages · 2012 · 30 MB · 37,675 Downloads · New!

a beginner or brushing up on existing skills.Build HTML pages with text, links, images, tables, and forms Use .

Основы HTML

HTML (Hypertext Markup Language) – это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

Что такое HTML на самом деле?

HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

p>Моя кошка очень раздраженаp> 

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, “p”), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
2. Имя атрибута, за которым следует знак равенства.
3. Значение атрибута, заключённое с двух сторон в кавычки.

Вложенные элементы

Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово “очень” в элемент , который указывает, что слово должно быть сильно акцентированно:

p>Моя кошка strong>оченьstrong> раздражена.p> 

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент , затем элемент , потом мы должны закрыть сначала элемент , затем . Приведённое ниже неверно:

p>Моя кошка strong>очень раздражена.p>strong> 

Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент , который уже имеется в нашем HTML:

img src="images/firefox-icon.png" alt="Моё тестовое изображение"> 

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

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

DOCTYPE html> html> head> meta charset="utf-8"> title>Моя тестовая страницаtitle> head> body> img src="images/firefox-icon.png" alt="Моё тестовое изображение"> body> html> 

• — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
• — элемент . Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
• — элемент . Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
• — элемент . В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
• — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
• — элемент . Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

Изображения

Давайте снова обратим наше внимание на элемент изображения:

img src="images/firefox-icon.png" alt="Mоё тестовое изображение"> 

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:

1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src , сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

Альтернативный текст – это “пояснительный текст”. Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст “My test image” (“Моё тестовое изображение”) не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет “The Firefox logo: a flaming fox surrounding the Earth” (“Логотип Firefox: огненный Лис вокруг Земли”).

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

Примечание: Узнайте больше о специальных возможностях.

Разметка текста

В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.

Заголовки

Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков (en-US)– (en-US), хотя обычно вы будете использовать не более 3-4 :

h1>Мой главный заголовокh1> h2>Мой заголовок верхнего уровняh2> h3>Мой подзаголовокh3> h4>Мой под-подзаголовокh4> 

Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента .

Абзацы

p>Это одиночный абзацp> 

Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом .

Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

1. Ненумерованные списки – это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент .
2. Нумерованные списки – это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент .

Каждый пункт внутри списков располагается внутри элемента (list item, элемент списка).

Например, если мы хотим включить часть следующего фрагмента абзаца в список:

p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе . p> 

Мы могли бы изменить разметку на эту:

p>Mozilla, мы являемся мировым сообществомp> ul> li>технологовli> li>мыслителейli> li>строителейli> ul> p>работающих вместе . p> 

Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

Ссылки

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — — a это сокращение от “anchor” (“якорь”). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

1. Выберите некоторый текст. Мы выбрали текст “Манифест Mozilla”.
2. Оберните текст в элемент , например так:

a>Манифест Mozillaa> 

a href="">Манифест Mozillaa> 

a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozillaa> 

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

Примечание: href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference (“гипертекстовая ссылка”).

Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

Заключение

Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):

Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.

Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.

В этом модуле

• Установка базового программного обеспечения
• Каким должен быть ваш веб-сайт?
• Работа с файлами
• Основы HTML
• Основы CSS
• Основы JavaScript
• Публикация вашего веб-сайта
• Как работает Веб

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 15 дек. 2022 г. by MDN contributors.

Your blueprint for a better internet.