Шошгоны агуулгыг зэрэгцүүлэх. HTML дэх шинж чанарууд ба гарчиг Онол ба практик - HTML хуудасны догол мөр, гарчиг

Сайн уу? Үндсэн ойлголтуудыг үргэлжлүүлэн эзэмшье HTML хэл. Текстийг төв, өргөн эсвэл ирмэг дээр зэрэгцүүлэхийн тулд юу бичих хэрэгтэйг харцгаая.

Ажилдаа орохдоо текстийг хэрхэн гурваар голлохыг харцгаая янз бүрийн арга замууд. Сүүлийн хоёр нь загварын хуудастай шууд холбогддог. Энэ нь сайтын хуудсуудтай холбогдож, гадаад төрхийг нь тодорхойлдог CSS файл байж болно.

Арга 1 - HTML-тэй шууд ажиллах

Энэ нь үнэндээ маш энгийн. Доорх жишээг үзнэ үү.

Догол мөрийг төв рүү чиглүүлнэ.

Хэрэв та текстийн хэсгүүдийг өөр аргаар зөөх шаардлагатай бол "төв" параметрийн оронд дараах утгыг оруулна уу.

• зөвтгөх - текстийг хуудасны өргөнтэй зэрэгцүүлэх;
• баруун - баруун ирмэг дээр;
• зүүн - зүүн тийш.

Үүнтэй адилаар та толгой (h1, h2) болон контейнер (div) дотор байгаа контентыг зөөж болно.

2 ба 3-р арга - хэв маягийг ашиглах

Дээр үзүүлсэн загварыг бага зэрэг өөрчилж болно. Үр нөлөө нь ижил байх болно. Үүнийг хийхийн тулд та доорх кодыг бичих хэрэгтэй.

Текст блок.

Энэ маягт дээр текстийн агуулгыг төвлөрүүлэхийн тулд кодыг HTML руу шууд бичдэг.

Өөр бас байна уу Альтернатив сонголтүр дүнд хүрэхийн тулд. Та хэд хэдэн алхам хийх хэрэгтэй болно.

Алхам 1. Үндсэн кодонд бичнэ үү

Текст материал.

Алхам 2. Оруулсан CSS файлд дараах кодыг оруулна уу:

Ровно (текстийг зэрэгцүүлэх: төвд;)

"Ровно" гэдэг үг бол өөрөөр нэрлэж болох ангийн нэр гэдгийг би тэмдэглэж байна. Энэ нь програмистын үзэмжээр үлддэг.

Үүнтэй адилтгаж үзвэл HTML дээр та текстийг төвлөрсөн, зөвтгөгдсөн, хуудасны баруун эсвэл зүүн ирмэгт зэрэгцүүлэн хялбархан хийж болно. Таны харж байгаагаар зорилгодоо хүрэх нэгээс олон сонголт бий.

Хэдхэн асуулт:

• Та мэдээллийн ашгийн бус төсөл хэрэгжүүлж байна уу?
• Та вэбсайтаа сайн хийхийг хүсч байна уу? Хайлтын системүүд?
• Та онлайнаар орлого олохыг хүсч байна уу?

Хэрэв бүх хариулт эерэг байвал о-г хараарай нэгдсэн арга барилсайтын хөгжилд. Энэ мэдээлэл нь WordPress CMS дээр ажилладаг бол ялангуяа ашигтай байх болно.

Таны вэбсайтууд бол интернетээр идэвхгүй эсвэл идэвхтэй орлого олох олон сонголтуудын нэг гэдгийг би онцлон хэлмээр байна. Миний блог онлайн санхүүгийн боломжуудад зориулагдсан болно.

Та замын хөдөлгөөний арбитраж, хуулбар бичих болон алсаас хамтран ажиллах замаар үндсэн болон нэмэлт орлого олдог бусад үйл ажиллагааны чиглэлээр ажиллаж байсан уу? Та энэ тухай болон бусад олон зүйлийг яг одоо миний блогын хуудсуудаас мэдэж болно.

Ирээдүйд би нэлээд хэдэн зүйлийг нийтлэх болно хэрэгтэй мэдээлэл. Холбоотой байгаарай. Хэрэв та хүсвэл Workip шинэчлэлтийг цахим шуудангаар захиалж болно. Захиалгын маягтыг доор харуулав.

Энэ хичээл нь HTML хэл дээрх аливаа зүйлийн зайлшгүй элемент болох атрибутууд болон толгой хэсэгт зориулагдсан болно HTML баримт бичиг. Ийм учраас энэ асуудлыг эзэмших нь маш чухал юм. Энэ хичээл нь шинж чанар гэж юу болохыг тайлбарлаж, шинж чанаруудтай ажиллах жишээг өгдөг. Хичээл нь HTML-д хэрэглэгддэг толгойн мэдээллийг авч үзэх ба толгойн жишээнүүдийг өгдөг.

HTML дэх шинж чанарууд

Атрибут гэж юу вэ? Аттрибут нь шошгонд тодорхой мэдээлэл өгдөг параметр юм. Эдгээр параметрүүд нь маш олон байж болно. Жишээлбэл, шинж чанаруудыг ашиглан бид догол мөрний текстийг зэрэгцүүлж, үсгийн хэв маяг, хэмжээг тохируулах, шаардлагатай догол мөрийг тохируулах гэх мэт боломжтой. Шинж чанаруудыг шошгон дотор бичиж, дараа нь тэнцүү тэмдэг тавьж, атрибутын утгуудыг давхар хашилтанд тэмдэглэнэ. Шинж чанаруудыг бие биенээсээ цэг таслалаар тусгаарлана.

Шинж чанаруудтай ажиллах жишээ

Жишээнүүдийг ашиглан шинж чанаруудтай ажиллахыг харцгаая. Хамгийн энгийн жишээ бол догол мөрийг авч үзье

"Зохицуулах" шинж чанартай. Ингээд бичье:

Догол мөрийг зүүн зэрэгцүүлэх жишээ

"Align" шинж чанар нь хөтчид өгөгдсөн догол мөрийг дэлгэцийн зүүн ирмэгтэй зэрэгцүүлэхийг хэлдэг.

Дараах шинж чанаруудыг мөн догол мөрний шошгонд хэрэглэж болно.

• align="center" – дэлгэцийн төв рүү зэрэгцүүлэх;
• align = "баруун" - баруун зэрэгцүүлэх;
• align="justify" - текстийг дэлгэцийн өргөнтэй зэрэгцүүлнэ.

Одоо даалгавраа хүндрүүлье - бүтээцгээе HTML хуудасхэд хэдэн өөр шинж чанарыг ашиглах. Ийм хуудасны жишээ нь дараах кодтой байх болно.

HTML дэх шинж чанарууд

"bgcolor" өнгөт шинж чанар нь хуудасны дэвсгэр өнгийг тохируулах боломжийг бидэнд олгодог. "Төв" ба "зөвтгөх" шинж чанарууд нь текстийг дотроос нь төвлөрсөн ба зөвтгөдөг.

HTML хэл дээрх гарчиг

индекстэй. Зөвхөн зургаан ийм индекс байдаг - 1-ээс 6 хүртэл тэдгээр нь толгойн хэмжээг заана (

хамгийн том гарчиг юм

- хамгийн жижиг). Жишээлбэл, хэд хэдэн гарчигтай вэб хуудас үүсгэцгээе. Энэ хуудасны код дараах байдлаар харагдах болно.

HTML дэх шинж чанарууд

Атрибут гэж юу вэ? Аттрибут нь шошгонд тодорхой мэдээлэл өгдөг параметр юм. Эдгээр параметрүүдийн тоо хязгааргүй байж болно.

HTML хэл дээрх гарчиг

Хуудас дээр гарчиг үүсгэхийн тулд тусгай шошго ашигладаг индекстэй. Зөвхөн зургаан ийм индекс байдаг - 1-ээс 6 хүртэл, тэдгээр нь гарчгийн хэмжээг заадаг ...

Энэ жишээнд бид хоёр гарчигтай байна - эхний түвшний гарчиг нь шинж чанаргүй, хоёр дахь түвшний гарчиг нь төвд зэрэгцүүлэх шинж чанартай байна. Гарчгийн дараа догол мөрүүд байдаг бөгөөд тэдгээр нь бас өөрийн гэсэн шинж чанартай байдаг.

Энэ нь HTML дээр атрибут болон толгойтой ажиллах зарчим юм. Энд ямар ч төвөгтэй зүйл байхгүй. Энэ хичээлээр хүлээн авсан мэдээллээ нэгтгэхийн тулд та өөрийн жишээн дээр дасгал хийх нь гарцаагүй.

Хүссэн оролтын элементүүдийг "checkbox" төрлөөр сонгохын тулд та сонгогчийг ашиглаж болно ':checkbox'. Жишээ:

Хаана зохицуулагч— өөрчлөлтийн үйл явдал тохиолдоход дуудагддаг зохицуулагч

jQuery дахь буцаан дуудлагын объекттой ажиллах: Буцах дуудлагын функцуудын жагсаалтыг ашиглах

jQuery дахь Callbacks объект нь fire() хэрэгслийн аргыг дуудах үед гүйцэтгэх дуудлагын жагсаалт гэх мэт зүйлийг үүсгэх боломжийг олгодог. Үүнээс гадна, fire() аргыг дуудахдаа буцаан дуудлагын функц бүрт хэрэглэгдэх зарим аргументыг дамжуулах боломжтой. Одоо бид хэд хэдэн жишээн дээр энэ нь хэрхэн ажилладаг талаар авч үзэх болно.

Анхаарал төвлөрөх алдалтыг барьж байна. jQuery дахь blur() арга

jQuery дахь blur() арга нь тухайн элементээс фокус алга болмогц дуудагдах хуудасны тодорхой элементэд зохицуулагч оноох боломжийг олгодог. Эхэндээ энэ үйл явдал нь үндсэндээ маягтын элементүүд - оролтын шошгонд хэрэглэгдэж байсан боловч хөтчүүдийн сүүлийн хувилбарууд бараг бүх төрлийн DOM элементийн хувьд энэ үйл явдлыг зохицуулах боломжтой болсон.

Сонгосон объектын агуулгын өмнө агуулгыг оруулна. jQuery дахь before() арга

jQuery дахь before() арга нь заасан объект бүрийн агуулгын өмнө тодорхой контент эсвэл объект оруулах боломжийг олгодог.
Аргын синтакс нь энгийн:

Хоёр дахь хувилбар:

jQuery. attr() арга. Элементэд атрибутыг хэрхэн авах эсвэл нэмэх вэ

jQuery нь хүссэн элементийн шинж чанаруудад хандах, утгыг нь олж авах, эсвэл эсрэгээр нь тохируулах, өөрчлөхөд маш хялбар болгодог. Ийм залилангийн хувьд attr() аргыг ашигладаг.

jQuery дахь .appendTo() арга. Элементүүдийн төгсгөлд контент нэмэх

appendTo() арга нь append() аргатай ижил үүрэг гүйцэтгэдэг. Үндсэндээ ялгаа нь зөвхөн синтакс юм. Хэрэв append()-д бид хүссэн сонгогчоо зааж өгөөд, түүнд энэ аргыг нэмж, хаалтанд заасан объектын агуулгын төгсгөлд яг юу нэмэх шаардлагатайг зааж өгсөн бол appendTo()-д юу нэмэх шаардлагатай байна. арга параметрийн хувьд хаалтанд байхаа больсон, мөн аргын өмнө нь appendTo()-г дуудагдсан объектын хувьд. Дараах жишээгээр ялгааг илүү сайн ойлгох болно.

jQuery .animate() Арга: Зураг, текст болон аливаа зүйлийг хөдөлгөөнт болгох

.animate() арга нь объектуудын CSS шинж чанарыг ашиглан хөдөлгөөнт эффект үүсгэх боломжийг олгодог. Энэ арга нь дамжуулсан параметрүүдийн өөр өөр тоо бүхий хоёр хувилбартай

Movavi ашиглан видео хөрвүүлэх

Сүүлийн үед ажил руугаа буцахдаа зарцуулдаг цагийг зөв ашиглахын тулд утсандаа илүү хэрэгтэй видеонуудыг урьдчилан татаж авахыг хичээдэг болсон. Утас нь Android дээр байгаа бөгөөд хамгийн сүүлд ухаалаг утас ямар нэг шалтгаанаар AVI форматаар видео тоглуулахаас татгалзсан үед асуудал гарсан. Тоглогч сул байна уу, эсвэл үйлдлийн системийн онцлог уу, би мэдэхгүй. Гэсэн хэдий ч асуудлыг шийдэхэд тийм ч их цаг зарцуулсангүй: би Интернетээс зөвхөн нэг форматаас нөгөө формат руу хөрвүүлэх төдийгүй таны төхөөрөмжийн шинж чанарыг харгалзан файл бэлтгэх боломжтой нэлээд ажиллагаатай видео хөрвүүлэгчийг олсон. Энэхүү гайхамшигтай програмыг хэрхэн ашиглах талаар товч тайлбарыг энд оруулав.

Вэб хуудасны олон текстийн элементүүдийг голд нь байрлуулах шаардлагатай. Ихэвчлэн гарчиг. CSS дээр текстийг хэрхэн голлуулахыг харцгаая.

текстийг зэрэгцүүлэх шинж чанар

Текст тэгшлэх шинж чанар нь үүнийг хариуцах бөгөөд дөрвөн утгатай байна:

• Зүүн - текстийг байгаа элементийн зүүн ирмэг рүү зэрэгцүүлнэ
• Баруун - баруун тийш зэрэгцүүлсэн боловч текстийн чиглэл өөрчлөгдөөгүй хэвээр байна
• Төв - төвд. Энэ бол бидэнд хэрэгтэй зүйл юм. Нэмэлт параметрүүдийг зааж өгөх шаардлагагүй - хөтөч өөрөө текстийг өөр өөр дэлгэцийн нягтрал дээр яг төвд байрлуулна.
• Зөвшөөрөх – зөвтгөх, мөр тус бүрийн үгсийг мөрийн өргөнийг бүхэлд нь эзлэхээр сунгасан байна

Жишээлбэл, бидэнд гарчиг бүхий захиалгат текст байна:

Гарчиг

Гарчиг (h1) голлохын тулд бид үүнийг бичих хэрэгтэй:

H1(
Текстийг зэрэгцүүлэх: төвд
}

Энэ шинж чанар нь зөвхөн ердийн текстийг төдийгүй бүх шугамын элементүүдийг зэрэгцүүлдэг. Жишээлбэл, зураг нь өгөгдмөл байдлаар доторлогооны элемент тул энэ дүрэмд мөн нөлөөлнө.

Text-align нь хөвөх шинж чанар шиг ажиллахгүй. Хэрэв тексттэй блокийн элементэд текстийг тэгшитгэхийг ашиглавал блок нь зан төлөвөө алдахгүй. Энэ нь блок өөрөө биш харин доторх текстийг дарах болно. Энэ нь бүхэл бүтэн элементийг баруун эсвэл зүүн тийш илгээдэг float шинж чанараас ялгаатай гэдгийг анхаарна уу.

Өмнө нь амласанчлан, энэ зааварт та хуучирсан align шинж чанарыг ашиглахгүйгээр хуудас дээрх аливаа HTML шошгоны агуулгыг хэрхэн хэвтээ байдлаар зэрэгцүүлэх талаар сурах болно. Таны таамаглаж байсанчлан бид хэв маягийг (CSS) дахин ашиглах болно, эс тэгвээс бидний дуртай загварын шинж чанарыг ашиглах болно.

Тиймээс, HTML элементийн агуулгыг зэрэгцүүлэхийн тулд та дараах утгуудын аль нэгийг загварын шинж чанарт оноох хэрэгтэй.

• текстийг зэрэгцүүлэх:төв- Мөр бүрийг догол мөр гэх мэт элементийн төвд зэрэгцүүлнэ.
• текстийг зэрэгцүүлэх: зүүн- Мөр бүр элементийн зүүн талд чанга дарагдсан (энэ нь анхдагч юм).
• текстийг зэрэгцүүлэх: баруун- Мөр бүрийг баруун талд нь дардаг.
• текстийг зэрэгцүүлэх: зөвтгөх- Элементийн зүүн ба баруун талд нэн даруй зэрэгцүүлнэ. Тайлбарлах болно. Ихэвчлэн догол мөр зэрэг элемент нь текстийн нэг тал нь шулуун, нөгөө тал нь "урагдсан" байдаг, учир нь мөрүүдийн урт нь арай өөр байдаг. Мөн бид text-align:justify утгыг ашиглах үед мөр бүр өргөнөөр жигд тархсан байна. Шаардлагатай бол хөтөч нь үгсийн хооронд нэмэлт зай нэмж, мөрийн эхний болон сүүлчийн үгийг үргэлж харгалзах тал руу нь дардаг тул та хоёр талдаа тэгшхэн блок авах болно.

Шошго агуулгын зэрэгцүүлэх жишээ

Төв рүү чиглэж байна.

Төв хэсэгт догол мөр.

Хөтөч дэх үр дүн

Төв рүү чиглэж байна.

Догол мөрний текстийг баруун талд нь дарна.

Төв хэсэгт догол мөр.

Ерөнхийдөө хэвтээ байрлал нь зөвхөн блок шошго болон хүснэгтийн нүднүүдэд хамаарна (бид дараа нь эдгээрийн талаар ярих болно). Гэсэн хэдий ч, нөгөө талаас, та оролдсон ч үүнийг суурилуулсан төхөөрөмжид ашиглах боломжгүй болно. Яагаад? Дотор элементийн өргөн нь түүний агуулгатай тэнцүү гэдгийг саяхан олж мэдсэнээ санаж байна уу? Үүний дагуу, энэ агуулга нь зүгээр л тэгшлэх газаргүй болж, хөтөч таны "урлаг" -ыг үл тоомсорлох болно. :)

Гэрийн даалгавар.

1. Өгүүллийн гарчиг, түүний хоёр хэсэг, эхний хэсэгт нэг дэд хэсгийг үүсгэ. Мөн нийтлэлийн гарчгийг хуудасны төвд байрлуул.
2. Хуудсыг бүхэлд нь Arial, бүх гарчгийг Times руу налуу үсгээр тохируулна уу.
3. Өгүүллийн гарчгийн текстийн өнгийг #FF6600, хэсгүүдийг #6600FF болгож, дэд хэсгийг хэвээр үлдээнэ үү.
4. Гарчиг бүрийн доор нэг догол мөрийг бичнэ үү, догол мөр бүрийг хөтөч дээрээс үзэхдээ дор хаяж гурван мөрийг багтаана.
5. Хоёр дахь догол мөрийг төвд, гурав дахь хэсгийг баруун тийш, дөрөв дэх хэсгийг хоёуланг нь зэрэгцүүлнэ.