Заголовок страницы

HTML Basic Examples

In this chapter we will show some basic HTML examples.

Don’t worry if we use tags you have not learned about yet.

HTML Documents

All HTML documents must start with a document type declaration: .

The HTML document itself begins with and ends with .

The visible part of the HTML document is between and .

Example

My First Heading

My first paragraph.

The Declaration

The declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The declaration is not case sensitive.

The declaration for HTML5 is:

HTML Headings

HTML headings are defined with the to tags.

defines the most important heading. defines the least important heading:

Example

This is heading 1

This is heading 2

This is heading 3

HTML Paragraphs

HTML paragraphs are defined with the

tag:

Example

This is a paragraph.

This is another paragraph.

HTML Links

HTML links are defined with the tag:

Example

The link’s destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the tag.

The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:

Example

How to View HTML Source

Have you ever seen a Web page and wondered «Hey! How did they do that?»

View HTML Source Code:

Right-click in an HTML page and select «View Page Source» (in Chrome) or «View Source» (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose «Inspect» or «Inspect Element» to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

Источник

HTML-ni yozishga kirish

HTML gipermatnni belgilash tili degan ma’noni anglatadi. HTML an’anaviy ma’noda til emas, balki ma’no jihatidan bu dasturchilar kompyuterlar bilan aloqa o’rnatishda foydalanadigan kalit so’zlar va buyruqlardan iborat vosita. HTML veb-dizaynerlar tomonidan Facebook, Twitter va HubPages kabi veb-saytlarni yaratish uchun ishlatiladi. Ushbu misollarda boshqa turli xil vositalar ham qo’llaniladi, ammo veb-saytlarni loyihalashtirishni o’rgangan kishi uchun HTML bu ulardan qanday foydalanishni o’rganishi kerak bo’lgan birinchi vosita.

Matn muharrirlari

HTML yozish uchun sizga matn muharriri kerak bo’ladi. Matn muharriri Word yoki dastur yoki insho yozish uchun mo’ljallangan dasturlardan farq qiladi. Word kabi dasturlarda paragraflarni shakllantirish va avtomatik bosh harflar kabi foydali vositalar mavjud, ammo bu vositalar HTML yozishda foydali emas. aslida, ular buni juda qiyinlashtirishi mumkin. HTML yozish uchun hech qachon Word dasturidan foydalanmang. Boshqa tomondan, matn muharrirlari ko’pincha dasturlash uchun maxsus ishlab chiqilgan vositalarga ega. U erda ko’plab matn muharrirlari bor, lekin men eng ko’p foydalangan uchta mavzuga to’xtalib o’taman.

Bloknot va TextEdit

Notepad yoki agar siz mac-dan foydalansangiz, TextEdit — bu matn muharriri oladigan eng asosiy narsa bo’lishi mumkin va HTML dasturini ushbu dasturlardan biri yordamida yaratish va tahrirlash juda oson. Salbiy tomoni shundaki, Notepad yoki TextEdit-da HTML yozish uchun biron bir foydali vosita mavjud emas, ammo agar siz shunchaki tez va sodda narsani yozmoqchi bo’lsangiz, unda bittasi ham ishni bajarish uchun etarli bo’ladi.

Qavslar

Qavslar yangi boshlanuvchilar uchun yaxshi tanlovdir. Notepad / TextEdit-dan qanday foydalanishni o’rganish biroz qiyinroq va u HTML va CSS-ni yodda tutganligi uchun qo’shimcha afzalliklarga ega. Qavslar ichiga HTML-ni yozishda foydali bo’lgan ko’plab vositalar kiradi, masalan, avtomatik to’ldirish takliflari, joriy chiziqni ajratib ko’rsatish, jonli oldindan ko’rish va qavsni ajratib ko’rsatish. Agar siz ushbu vositalarning nima ekanligiga yoki nima qilishiga ishonchingiz komil bo’lmasa, bu yaxshi, shuni bilingki, kelajakda HTML-dan foydalanishni tanlasangiz, ular siz uchun juda foydali bo’ladi. Oddiy HTML va CSS-da ishlaydigan har bir kishi uchun men tavsiya qilgan muharrir.

Atom

Atom — bu juda moslashtirilgan matn muharriri. unda juda ko’p foydali vositalar mavjud va ulardan HTML dan tashqari ko’plab dasturlash tillarida foydalanish mumkin. Afsuski, agar siz dasturlash bilan yangi tanishsangiz, uning juda moslashtirilgan tabiati sizni hayratga solishi mumkin. Men o’zim Atomni ko’plab loyihalar uchun ishlatganman va bu menga muharrir sifatida juda yoqadi, ammo agar siz dasturlash bilan yangi tanishsangiz yoki oddiy HTML va CSS bilan shug’ullansangiz, qolgan ikkita muharrirdan birini tavsiya qilaman. Aytish joizki, men sizni dasturlash bilan yaxshi tanishganingizdan yoki yanada rivojlangan loyihani amalga oshirishni niyat qilganingizdan so’ng, sizni Atomga sinab ko’rishingizni maslahat beraman.

Matn tahrirlovchisini taqqoslash

HTML uchun foydali vositalar

G’oyat katta bo’lishi mumkin

Ko’plab zamonaviy vositalar

HTML fayli yarating

Muharrirni tanlaganingizdan so’ng, uni oching va yangi fayl yarating va index.html (hammasi kichik) sifatida saqlang. «.Html» Internet-brauzerlarda ushbu faylda HTML borligini aytadi va «indeks» nomi brauzerlarda bu sizning veb-saytlaringiz bo’lishi kerakligini bildiradi. Siz haqiqatan ham ushbu faylni hozirda veb-brauzeringizda ochishingiz va uni ko’rishingiz mumkin, ammo bu shunchaki bo’sh sahifa bo’ladi, shuning uchun unga bir nechta matn qo’shamiz! Davom eting va quyidagi matnni index.html fayliga nusxalash va joylashtiring.

! DOCTYPE html> html lang = «en»> head> / head> body> Salom Dunyo !! MENING SAYTIMGA Xush kelibsiz !! / body> / html>

Faylingizni brauzerda ko’ring

Har bir satr nimani anglatishini tushuntirib beraman, lekin avval veb-saytingiz qanday ko’rinishini ko’rib chiqaylik. Davom eting va faylingizni yana saqlang. Faylingizni brauzerda ochish uchun sichqonchaning o’ng tugmachasini bosing va «bilan ochish» -ni tanlang, so’ngra brauzeringizni tanlang (quyidagi rasmga qarang).

Brauzeringiz quyidagi rasmga o’xshash sahifani ochishi kerak.

Tabriklaymiz, siz oddiy veb-sayt yaratdingiz! Hozir unchalik o’xshamasligi mumkin, ammo barcha veb-saytlar kichikdan boshlanadi. biroz ko’proq vaqt va kuch sarflab, biz uni yanada chiroyli narsaga aylantira olamiz.

Kodni tushuntirish

Agar hozirda ishlatilgan kodni tushuntirmasam, men juda yaxshi o’qituvchi bo’lolmas edim, kelinglar, unga kiraylik. Faylingizni yana oching, shunda biz kod satridan-satriga o’tamiz. Agar faylni bosganingizda brauzerda ochilsa, faylni o’ng tugmasini bosing va yana «bilan ochish» -ni tanlang, ammo bu safar brauzer o’rniga muharriringizni tanlang.

Ushbu birinchi satr brauzerga faylning qaysi dasturlash tilida ekanligini aytadi.

Ushbu ikkita satr ochilish va yopish teglari deb nomlanadi. Ochilish yorlig’i brauzerga veb-saytingizning ma’lum bir qismi qachon boshlanishini va yopilish teglari qaerda tugashini bildiradi. Matningizni tushunish osonroq bo’lishi uchun mos teglar orasiga qo’yilgan har qanday chiziqlarni indentatsiya qilish odatiy holdir. Klaviaturadagi yorliqni bosish tanlangan satrda indent hosil qiladi. Ushbu maxsus teglar HTML teglari deb nomlanadi va ular brauzerga ularning orasidagi hamma narsa HTML ekanligini aytishadi. «Lang =» en «qismi shu sababli brauzer ichki matn ingliz tilida bo’lishini kutadi.

Bu bosh teglar. Ushbu teglar orasiga joylashtirilgan matn veb-saytingizda ko’rinmaydi. Ushbu bo’lim brauzerga veb-saytning nomi nima ekanligini, maxsus shriftlar kabi uslublar vositalarini qaerdan olishini va veb-saytingiz yorlig’i belgisini saqlaydigan kodni oladi. Ushbu loyiha uchun biz ushbu bo’limni bo’sh qoldiramiz.

O’zingizning veb-saytingizda paydo bo’lishni istagan har qanday narsani siz ushbu tanadagi teglar orasiga joylashtirasiz. Bu sizning veb-saytingizning «tanasi» bo’ladi.

Bu oddiy matn. tanadagi teglar ichiga joylashtirilgan har qanday oddiy matn veb-saytda paydo bo’ladi. «&» Kabi ba’zi bir maxsus belgilar veb-saytingizda ko’rinmaydi, ammo ularni belgilar moslamalari yordamida ko’rsatish mumkin. Masalan, «Tom & Jerry» veb-saytingizda «Tom & Jerry» ga o’xshaydi.

Salom Dunyo!! MENING SAYTIMGA Xush kelibsiz !!

Ushbu vositalardan birgalikda oddiy veb-sayt yaratish uchun foydalanish mumkin.

! DOCTYPE html> html lang = «en»> head> / head> body> Salom Dunyo !! MENING SAYTIMGA Xush kelibsiz !! / body> / html>

O’qiganingiz uchun tashakkur

Ushbu maqolani o’qiganingiz uchun tashakkur. Agar sizda biron bir savol bo’lsa, iltimos, quyida sharh qoldiring. Ushbu loyihada yoki umuman HTML bilan bog’liq har qanday masalada yordam berishdan mamnunman. Bundan tashqari, bu erda HTML uchun ko’proq foydali veb-saytlarga havolalar mavjud.

• HTML darsligi
  HTML, CSS, JavaScript, SQL, PHP va XML dan foydalanish bo’yicha ko’plab misollar bilan yaxshi tashkil etilgan va tushunishga oson veb-o’quv qo’llanmalari.

• HTML — bepul interaktiv HTML qo’llanmasini o’rganing
  LearnHTML.org HTML-ni tezda o’rganishni istaganlar uchun bepul interaktiv HTML qo’llanmasi.

• HTML, CSS va PHP bo’yicha bepul qo’llanmalar — O’z veb-saytingizni yaratish — HTML.net
  HTML, CSS va PHP-da bepul qo’llanmalar — O’z veb-saytingizni yaratish — HTML, CSS va PHP-da bepul darsliklar — O’z veb-saytingizni yaratish

O’quvchilarim HTML bilan qaerda turishi haqida yaxshiroq g’oyani olishga yordam bering

Ushbu maqola aniq va muallifning eng yaxshi bilimlariga mos keladi. Tarkib faqat axborot yoki ko’ngilochar maqsadlar uchun mo’ljallangan va biznes, moliyaviy, yuridik yoki texnik masalalarda shaxsiy maslahat yoki professional maslahat o’rnini bosmaydi.

Источник

HTML начало

Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.

Создание HTML документов

Для того, чтобы создать HTML документ необходимо:

1. Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
2. Набрать произвольный текст и разметить его HTML тегами;
3. Cохранить файл с расширением .htm или .html.

Базовый документ HTML

Ниже приведен в своей простейшей форме пример HTML-документа:

Пример HTML:

 


  
 
Это заголовок
 
Это параграф.
 

Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:

HTML теги

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

Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа.

Рассмотренный пример HTML-документа использует следующие теги:

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

Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).

Структура HTML-страницы

Ниже приведена визуализация структуры HTML-страницы:

Источник

Читайте также:  Parse xml from html