HTML neCSS senge izwi processor. Izvi ndizvo zvega zvaunofanira kuziva

Kutanga kwaNdira takakuudza nezvazvo Markdown, iyo ingangove nzira yakanakisa yekutora manotsi nePC. Mutauro unogona kudzidzwa chaizvo muhafu yeawa kana kuti pasi, uye unotibvumira kugadzira magwaro akareruka ane imwe fomati uye chimiro. Kune zvakare LaTeX, asi curve yekudzidza yakakwira uye kuisirwa software hakusi kudiki. Pane imwe sarudzo, uye ndiko kugadzira zvinyorwa zvinyorwa uchishandisa HTML uye CSS.

HTML neCSS haisi mitauro yakagadzirwa nekugadzirisa zvinyorwa mupfungwa, asi inogonawo kushumira. Vakasanganiswa vanoita zvakawanda kupfuura izvozvo, asi nekuziva mashoma ma tag uye mirau isu tinogona kuita zvinopfuura muMunyori uye zvakanyanya kupfuura neMarkdown kana LaTeX. Pano tichatsanangura mabhesi iwayo, uyezve mamwe manomano kuitira kuti kudhinda kutaridzike kwakanaka.

HTML neCSS yezvinyorwa: sarudzo inoshanda

Chinhu chekutanga kuziva ndechekuti Kuti uone .html gwaro unoda web browser. Izvi ndizvo zvine basa rekupa uye kuratidza zvirimo, uye zvakare izvo zvinotitendera kudhinda gwaro. Haisi software yatinofanira kuisa zvakasiyana, sezvo isu tatova nezvimwe pane chero PC kana nharembozha.

Chimwe chinhu chaunofanira kuziva ndechekugadzira magwaro: ingovhura plain word processor (saKate), wedzera zvirimo wozvichengeta nazvo. .html extension. Isu tinokwanisa, uye muchokwadi ini ndinopa zano, zvakare kugadzira zvikamu zve Musoro and the muviri, mune yekutanga yezvikamu zvakaita sezvitaera zvakajairika uye yechipiri yegwaro pacharo.

Iniwo ndinokurudzira kushandisa Visual Studio Code kana chero yakafanana mupepeti, asi iyo inouya neinozivikanwa se Intellisense, ndiko kuti, izvo zvinotibvumira kuvhura nekuvhara mavara uye hatifaniri kuanyora akazara. Pamusoro pezvo, muCode tinogona kudzvanya isa "!" chiratidzo, tinya kiyi yetibhu uye ichagadzira iyo yakakosha chimiro.

Mategi ese anovhurwa nekuvharika aine zviratidzo "zvikuru pane" (<) uye "zvishoma pane" (>), asi tegi yekuvhara kazhinji ine slash (/) pamberi payo.

Neizvi zvatsanangurwa, ngatiendererei kune chinhu chakakosha.

Kubuda ropa muHTML uye CSS

MuHTML uye CSS, kubuda ropa hakudiwi. Iwe unogona kuisa zvese pamutsetse mumwe, asi zviri nyore kuverenga kana uine yakanaka indentation uye zvese zviri padanho rimwechete pahurefu hwakafanana. Chinhu chemwana chinowanzoiswa dzinenge nzvimbo ina mberi kurudyi, kana chero chinopihwa nekiyi tab.

HTML Headers

Misoro yeHTML inonyorwa ne "h" ichiteverwa nenhamba kubva pa1 kusvika 6. Semuenzaniso, chinyorwa chekare mu "HTML Headers" i "h2" uye chinyorwa chizere chingave:

HTML Headers

Bold, italic, strikethrough uye kuratidza

Kutevera kurongeka kwechinyorwa cheMarkdown, chinotevera chine ushingi, italics, strikethrough, uye kuratidza. Vangave seizvi:

Mavara akasvibirira Manyoro  Crossed text Chinyorwa chakasimbiswa

Icharatidza izvi:

Bold zvinyorwa
Zvinyorwa zveitalic
Zvinyorwa zvinyorwa
mavara akasimbiswa

Simba uye subscript

Kana isu tichida kuisa nhamba diki uye yakati wandei yakasimudzwa (simba) kana imwe kune rimwe divi (subscript), tinogona neaya mavara:

Power Subindex

Ndima

Isu tiri kutevera kurongeka kwechinyorwa cheMarkdown, asi inogona kunge isiri yakanakira HTML neCSS. MuMarkdown, ndima dzakanyorwa pasina chero tags, ndosaka yakaiswa pano, asi muHTML imwe inoshandiswa. Zvese zviri pakati pekuvhura nekuvhara tag ichave bhuroka, uye ichave neiyi syntax:

Zvese zvatinoisa pakati pema tag maviri aya ichava ndima. Kana tikazoisa imwe, pachave nekutsemuka kwemutsara pakati pezvese. Mukati me block label panogona kunge paine mamwe, senge bold point, nezvimwe, uye mamwe inline mavara. Mukufunga, zvese zviri muno zvichave ndima inoenderera. Kana tichida kuiparadzanisa, tinofanira kuwedzera mamwe kana kushandisa ma tag atinozotaura gare gare.

Lists

Rondedzero, angangoita akanyanya kukosha muHTML, akarairwa uye asina kurongeka. Vanogona kuvhiringa kune vasingavazive, asi mupepeti seVisual Studio Code anoita kuti zvinhu zvive nyore. Syntax yayo ingave iyi:

Chinhu 1 pasina kurongeka Element 2 pasina kurongeka Element 3 pasina kurongeka Chinhu 1 charongwa Chinhu 2 charongwa Item 3 yakarongwa

zvicharatidza izvi

• Chinhu 1 pasina kurongeka
• Chinhu 2 pasina kurongeka
• Chinhu 3 pasina kurongeka

1. Chinhu 1 charongwa
2. Chinhu 2 charongwa
3. Chinhu 3 charongwa

Mazita anovhurwa uye akavharwa nemavara, iyo "ul" kana yakakanganiswa, uye nekusarudzika icharatidza bhora kumberi, uye iyo "ol" kana yakarairwa uye nekusarudzika ichaisa nhamba pamberi. Iwo akaverengerwa anorongedzerwa otomatiki, ndiko kuti, chinhu chekutanga mushure metagi yekuvhura chinotungamirwa ne1, chechipiri ne2, zvichingodaro.

Kuti uwane misanganiswa yerondedzero, unofanirwa kutanga zvinyorwa nemategi akafanana ("ul" kana "ol").

Kune zvakare rondedzero dzetsanangudzo, dzinotanga nekupera nerekuti "dl" uye mukati mune mazwi (dt) uye tsananguro (dd) neiyi syntax:

Linux MaSystem atinoda Windows Masisitimu atisinga shandise zvakanyanya pano

Icharatidza izvi:

Linux

    MaSystem atinoda

Windows

    Masisitimu atisinga shandise zvakanyanya pano

Matsamba emabasa

Iko hakuna mazita emabasa muHTML, asi anogona kugadzirwa. Kuti uite izvi uchafanirwa kuwedzera bhokisi rekutarisa, uye rinotaridzika seizvi:

Chinhu chekutanga Chinhu chechipiri Chetatu chinhu

Icharatidza izvi:

• Chinhu chekutanga
• Chinhu chechipiri
• Chetatu chinhu

Pano taunza mutemo weCSS kuti ubvise ma disks anoonekwa nekusarudzika mumazita. Uye isu takazviomesa zvishoma, asi zvinogona kurerutswa. Chikamu chezita chinogona kusiiwa, asi chikaiswa semumuenzaniso, chinyorwa chinozoshanda kumaka bhokisi kana wadzvanywa.

Links muHTML

Manongedzo anogadzirwa ne "a" tag, uye iva neichi chimiro:

<a href="https://linuxadictos.com/">Blog yako nezve Linux (neHTML?)

Icharatidza izvi:

Blog rako nezve Linux (uye HTML?)

Iyo link inoenda mushure me "href" hunhu, uye zvinyorwa zvinoenda pakati pekuvhura nekuvhara tags.

Manongedzo anogona kunongedzera kuchiziviso. Semuyenzaniso, kana tikawedzera id = "test" kune chimwe chinhu chiri mutegi yekuvhura, tinogona kushandisa #test link kuitira kuti kudzvanya pairi kunotiendesa kune icho chinhu, chero chiri papeji imwe chete. Zvikasadaro, hashi nechiziviso zvichaiswa mushure me.html.

Mifananidzo muHTML

Mifananidzo yeHTML inowedzerwa kune "img" tag seizvi:

Zvino, kana tichida kuti zvese zvive mugwaro rimwe chete, tinogona kuzvishandura kuita base64 tovawedzera neimwe nzira

Kana tichida kuti mufananidzo utiendese kune imwe peji rewebhu, tinongofanira kuukomberedza ne "a" ine "href" inowirirana.

Kusarudzwa

Kune mhando mbiri dzemakotesheni, asi inonyanya kushandiswa ndeye block quotes. Yakasanganiswa nendima yekusuma, inotaridzika seizvi:

Uye Pablinux akati: Isu tichatsanangura maitiro ekugadzira zvinyorwa zvinyorwa uchishandisa HTML neCSS.

Icharatidza izvi:

Uye Pablinux akati:

Isu tichatsanangura maitiro ekugadzira zvinyorwa zvinyorwa uchishandisa HTML neCSS.

Tinogona kusanganisa inline quotations ne "cite" tag, iyo nekusarudzika kazhinji inoiisa mune yakatsveyama. Kana gwaro racho riri redu, tinogonawo kushandisa "i" kana "em" uye tichawana maitiro akafanana. Zvinokurudzirwa kuisa chinyorwa ichocho mumakotesheni.

Kana tichida kutora makotesheni, tinongofanira kuisa "blockquote" imwe mukati meimwe.

HTML code

Iyo kodhi muHTML inoiswa pakati pe "kodhi" tags, uye haina zvakawanda zvakavanzika. Iyo inowanzoiratidza ine monospaced font, uye nekushandisa ma tag ayo isu tichakwanisa kurongeka semantically (iyi inyaya yeHTML) uye isu tinogona zvakare kupa iyo kodhi iyo yakakosha fomati. Hazvisi kuzonaka sevamwe Vapepeti veMarkdown, kunze kwekunge taipa fomati isingaite otomatiki pano.

Tables

Sezvirongwa, matafura anogona zvakare kunetsa kugadzira, asi nekuwedzera iyi poindi tinogona kuita zvakawanda mumagwaro edu ezvinyorwa neHTML neCSS. Nzira chaiyo yekuzviita ichava nezvikamu zvitatu: "thead", "tbody" uye "tfoot" iyo inopinda mukati me "tafura" tag, asi unogona kusiya zvose zvitatu kana matafura ari nyore uye isu hatifaniri kupatsanura. zviri mukati mavo.

Mukati mematafura isu tinofanirwa kugadzira mitsetse (tr) ine data (td) uye chimiro chingave seizvi:

musoro mumwe musoro Musoro wetatu Chidimbu cheruzivo pamutsetse wepamberi Imwe chidimbu cheruzivo pamutsetse wepamberi Chokwadi chechitatu mumutsetse wekutanga Chidimbu cheruzivo pamutsetse wechipiri Mamwe mashoko pamutsetse wechipiri Data yechitatu mumutsara wechipiri Chidimbu cheruzivo pamutsetse wechitatu Mamwe ruzivo pamutsetse wechitatu Data yechitatu mumutsetse wechitatu Chigumisiro chekutanga Chigumisiro chechipiri Chigumisiro chechitatu

Icharatidza izvi (iyo fomati haifanirwe kuoneka neyakagadzika):

Matafura anogona kuwedzera kuoma, uye isu hatigone kutarisa pamagadzirirwo aanoitwa kana isu tingatora nguva yakawanda nenzvimbo. Hongu, tinogona kutaura kuti tinofanira kungwarira kuti dzinokwana uye kuti bhokisi rinogona kuitwa kuti ritore hupamhi hunopfuura humwe nekuwedzera kune "td" inowirirana iyo hunhu "colspan" inoteverwa nenhamba yemabhokisi atinoda. kutora (semuenzaniso, colspan="2") Kune chinhu chimwe chete asi chakamira, "rowspan" inoshandiswa (muenzaniso rowspan=”3″).

Mitsetse yakachinjika uye mitsara inotsemuka

Kana tichida kugadzira mutsara wakatwasuka unoenda kubva kune chikamu kuenda kune chikamu chegwaro, isu tichashandisa iyo label , uye kana tichida kuita mutsara kutyora .

Kupa masitaera kugwaro redu neHTML neCSS

Kusvika pari zvino, zvatinazvo hazvisi chimwe chinhu kunze kwekuoma Markdown, handiti? Zvese izvi zvaisaita chero zvine musoro dai zvisiri zvekuti isu tinogona zvakare kushandisa CSS, uye heano mamwe matipi.

Kana tichida kuti zvese zvive mugwaro rimwe chete, CSS inofanira kuwedzerwa mukati me "style" tag kana mukati me HTML tag mune hunhu hwezita rimwechete, semuenzaniso watakashandisa kudzivirira runyorwa rusina kurongeka kubva kuratidza dhisiki nekukasira.

CSS inotibvumira kuita zvakawanda, uye kunyange zvinhu zvakati wandei panguva imwe chete. Kana tichida kuti misoro yese yerudzi rwechipiri (h2) ive pakati uye tsvuku, isu tinofanirwa kuwedzera izvi kune "style" tag mukati me "musoro":

h2 {text-align:center; ruvara:tsvuku; }

Nezviri pamusoro apa tiri kuti: "shandisa iyo yepakati mavara mutemo uye ruvara rutsvuku kune ese h2 tags." Kana tichida kuti ive misoro yose, tisati tasungirirwa taizofanira kuwedzera mutengi "h1, h2, h3, h4, h5, h6". Zvese zviri kuruboshwe nekukasira, uye zvakare zvinogona kuiswa kurudyi kana tikashandisa "kurudyi" pane "pakati."

Mimwe mitemo inokurudzirwa

• Kumashure-ruvara: vakasarudzwa_ruvara;, apo "chosen_color" ichava ruvara nezwi riripo, rakadai se "tsvuku", kana RGB kana HSL code, pakati pezvimwe. Inopa ruvara rwekumashure kuchinhu.
• muganhu-radius: selected_curve, apo "chosen_curve" inenge iri mumapikisesi kana muzana. Iyo inopa curve kumakona, uye iwe unogona kuseta yakazvimirira tsika kune yega yega.
• mavara-mumvuri: 1px 2px 2px nhema;, uko ukoshi hunogona kuve humwe. Inopa mumvuri kune chinyorwa, kukosha kwekutanga paX axis, yechipiri paY, yechitatu ndiyo blur uye yechina irwo ruvara.
• bhokisi-mumvuri: 1px 2px 2px dema;, zvakangofanana nezvakapfuura, asi kubhokisi rese kwete zvinyorwa chete.
• font-size: a_size;, apo "a_size" inenge iri saizi inogona kuva yezvikamu zvakasiyana, kazhinji mumapikisi.
• font-uremu: a_ukobvu;, uko "a_kukora" kuchava ukobvu hwefonti. Tinogona kushandisa mazwi akaita sekuti “bold” kana “bolder” kana mayunitsi kubva pa100 kusvika pa900 kana mhando yemafonti ichiatsigira.
• font-mhuri: font_type;, apo “font_type” inenge iri font.
• muganhu: 1px bhuruu yakasimba;, yekutanga kuva gobvu, yechipiri mhando uye yechitatu ruvara runogona kusiyana. Izvi zvichawedzera muganhu kune chinhu.
• padding y margin Ivo vese vanotipa muganho wakatenderedza chinhu, asi nemusiyano: padding chikamu chechinhu pachacho, nepo kumisa inzvimbo yainogara, asi kwete yechinhu. Mhando dzakasiyana dzezviyero zvinogona kupinzwa, iyo inonyanya kuzivikanwa iri pixels.
• upamhi y urefu Dzinoshumira kuratidza kufara uye urefu hwemamiriro ekunze. Iwo anoshandiswa mashoma mumhando yemavara (iyi ndiyo iyo font-saizi ndeye), asi yakawanda mumidziyo (iyo yatisina kuona pano) uye muzvinhu zvakaita semifananidzo. Mhando dzakasiyana dzezviyero zvinoshandiswa, senge pixels.
• Zvimwe mukati DND.

Zano rekudhinda gwaro muHTML neCSS

Dambudziko rimwe ratingasangana naro pakugadzira zvinyorwa neHTML neCSS nderekuti Mabhurawuza haaprinde zvinhu nenzira yatinoda. Semuenzaniso, ichatsemura zvinhu senge zvinyorwa, uye ichi chimwe chinhu chatisingade kuona.

Zano rangu nderekuti, paunodzvanya printa nebrowser (Ctrl+P kazhinji), tinowedzera miganho yetsika pamusoro uye pazasi. Izvi zvichagadzirisa kukanganisa kwekuti zvinyorwa zvinogona kunge zviri pedyo zvakanyanya nepamusoro uye pasi pemicheto (iwe unogonawo kuita kuti isaratidze musoro uye tsoka).

Iyo yakakamurwa zvinhu nyaya inogadziriswa nekuwedzera mutemo uyu muchikamu cheCSS:

@media kudhinda{muviri {kumashure-ruvara: chena; } ul, ol{ break-inside: avoid; /* Haicheke rondedzero kana ichidhinda* }}

Izvo zviri pamusoro zvinokuudza kuti, kana uchidhinda, kumashure kuchena uye kuti zvinyorwa hazvina kupatsanurwa pakutsemuka kwemapeji. Zvimwe zvinhu zvinogona kuiswa mukusarudza, se "tafura" kana tikaona kuti inodimbura. Ini ndinofunga kuti hazvina basa kuisa dzimwe pano sendima, nekuti izvo zvakanaka kupatsanura.

Chimwe chinhu chatinogona kuita kushandisa zvinotevera kuti manikidza kutsemuka kwepeji kwese kwatinoda, kwakakodzera, semuenzaniso, kupedza chitsauko uye kuti zvinotevera zvibude papeji rinotevera (kana zvikasashanda, shandisa peji-kutyora-shure, izvo zvavanoti zvichamira kushanda mune ramangwana):

Imwezve sarudzo

Uye izvi zvingava zvose. NeHTML neCSS isu tine kutonga kwakawanda kupfuura neMarkdown uye zviri nyore, kubva pamaonero angu, kupfuura LaTeX, kunyangwe ivo vachitamba mumakwikwi akasiyana. Ndiyo imwezve sarudzo.