HTML, CSS na PHP: Karatasi ya Kudanganya ya Mwisho

Imeandikwa na

📥 Pakua faili yangu ya Karatasi za kudanganya za HTML, CSS na PHP, kamili na kila kitu unachohitaji kujua na kukumbuka kuhusu lugha hizi tatu za kuweka alama.

Sanaa ya usimbuaji inaweza kuchukua miaka kumiliki kikamilifu vitambulisho vyote, sintaksia, na vitu vingine vya lugha za programu mara nyingi huingiliana.

Hata watengenezaji wenye ujuzi zaidi wanaweza kuanguka katika mtego wa kusahau syntax sahihi kwa kazi fulani. Kwa hivyo, sio kweli kutarajia kijani zaidi watengenezaji wa wavuti kuwa na ufahamu kamili wa sanaa.

Hii ni kwa nini kudanganya shuka kwa HTML, CSS, na PHP ni muhimu sana, bila kujali umekuwa ukifanya mazoezi kwa muda gani. Inatumika kama mwongozo wa haraka kupata amri sahihi na sintaksia, hukuruhusu kuzingatia maendeleo halisi ya wavuti.

Hapo chini, utapata shuka za kudanganya zilizo na mwonekano uliotanguliwa na viburudisho vya haraka kukusaidia katika shughuli zako za usimbuaji. Nimefanya pia iweze kualamishwa kwa urahisi, kuokolewa, au kuchapishwa kwa urahisi wako.

HTML ni nini?

HTML inasimama kwa Lugha ya Markup ya Hypertext - nambari ambayo hutumiwa kuunda muundo wa ukurasa wa wavuti na yaliyomo.

Lugha hii ya markup inajumuisha safu ya vitu ambavyo vilikuwa vikifanya yaliyomo kuonekana au kufanya kazi kwa njia fulani na ni sehemu kuu ya msimbo wa mwisho wa kila tovuti.

HTML ni lugha ya kuelezea muundo wa kurasa za wavuti ... Na HTML, waandishi wanaelezea muundo wa kurasa kwa kutumia alama. Vipengele vya vipande vya lebo ya lugha kama vile aya, orodha, jedwali, na kadhalika. - kutoka W3.org

Kwa mfano, unaweza kufunga au kufunika sehemu tofauti za yaliyomo - ambapo vitambulisho vilivyofungwa vinaweza kutengeneza kiunga cha neno au picha kwenye ukurasa mwingine. Unaweza pia kutumia hii kutuliza maneno na kufanya fonti iwe kubwa au ndogo, kati ya zingine.

Kama ilivyoelezwa na W3, baadhi ya mambo mengine ambayo HTML hukuruhusu kufanya ni pamoja na:

  • Kuchapisha nyaraka mkondoni na vichwa, maandishi, meza, orodha, picha, Nk
  • Kupata habari mkondoni kwa kubofya kitufe kupitia viungo vya hypertext.
  • Kubuni fomu za kwa kufanya shughuli na huduma za mbali kwa tafuta habari, fanya kutoridhishwa, au kuagiza bidhaa, kati ya kazi zingine.
  • Ikiwa ni pamoja na lahajedwali, klipu za video, na media zingine na maombi tayari kwenye hati zako.

Kwa hivyo ikiwa ungefanya mstari "Mbwa wangu ni mtamu sana" kusimama yenyewe, unaweza kutaja kuwa ni aya kwa kuifunga kwenye vitambulisho vya aya (zaidi juu ya hii baadaye), ambayo ingeonekana kama: Mbwa wangu ni mtamu sana

Je! Ni tofauti gani kati ya HTML na HTML5?

Kama jina linavyosema, HTML5 ni toleo la tano la kiwango cha HTML. Inasaidia ujumuishaji wa video na sauti kwenye lugha, ambayo hupunguza hitaji la programu-jalizi za mtu wa tatu na vitu.

Chini ni tofauti kuu kati ya HTML na HTML5:

HTML

  • Haitumii sauti na video bila msaada wa kichezaji.
  • Inatumia kuki kuhifadhi data za muda mfupi.
  • Hairuhusu JavaScipt kukimbia kwenye kivinjari.
  • Inaruhusu picha za vector kwa kutumia teknolojia tofauti kama VML, Nuru ya fedha, na Flash, kati ya zingine.
  • Hairuhusu athari za buruta na kuacha.
  • Inafanya kazi na vivinjari vyote vya zamani.
  • Chini ya urafiki wa rununu.
  • Tamko la mafundisho ni refu na ngumu.
  • Haina vipengele kama vile nav na kichwa, pamoja na sifa kama vile charset, async, na ping.
  • Ni ngumu sana kupata GeoLocation ya kweli ya watumiaji kwa kutumia kivinjari.
  • Imeshindwa kushughulikia sintaksia isiyo sahihi.

HTML5

  • Inasaidia udhibiti wa sauti na video na matumizi ya na vitambulisho.
  • Inatumia hifadhidata ya SQL na kashe ya programu ili kuhifadhi data nje ya mtandao.
  • Inaruhusu JavaScript kufanya kazi nyuma na matumizi ya API ya mfanyakazi wa Wavuti ya JS.
  • Vector graphics ni sehemu ya msingi ya HTML5, kama SVG na turubai.
  • Inaruhusu buruta na Achia athari.
  • Fanya iwezekanavyo kuteka maumbo.
  • Inasaidia vivinjari vyote vipya kama Firefox, Mozilla, Chrome, na Safari.
  • Inapendeza zaidi kwa rununu.
  • Tamko la mafundisho ni rahisi na rahisi.
  • Ina vipengele vipya vya miundo ya wavuti kama vile nav, kichwa, na kijachini, miongoni mwa vingine, na pia ina sifa za charset, async, na ping.
  • Inafanya tabia ya usimbuaji rahisi na rahisi.
  • Inaruhusu ufuatiliaji wa GeoLocation ya mtumiaji kwa kutumia JS GeoLocation API.
  • Uwezo wa kushughulikia sintaksia isiyo sahihi.
 

Kwa kuongezea, kuna vitu vingi vya HTML ambavyo vimebadilishwa au kuondolewa kutoka HTML5. Hii ni pamoja na:

  • - Ilibadilishwa kuwa
  • - Ilibadilishwa kuwa
  • - Ilibadilishwa kuwa
  • - Imeondolewa
  • - Imeondolewa
  • - Imeondolewa
  • - Hakuna lebo mpya. Inatumia CSS.
  • - Hakuna lebo mpya. Inatumia CSS.
  • - Hakuna lebo mpya. Inatumia CSS.
  • - Hakuna lebo mpya. Inatumia CSS.
  • - Hakuna lebo mpya. Inatumia CSS.

Wakati huo huo, HTML5 pia inajumuisha vitu kadhaa vipya vilivyoongezwa. Hii ni pamoja na:

 

Mifano ya HTML5 (Kanuni ya PlayGround)

Mifano ya Muundo wa Semantiki

Katika HTML5 kuna vitu kadhaa vya semantic ambavyo vinaweza kutumiwa kufafanua sehemu tofauti za ukurasa wa wavuti. Hapa kuna zile za kawaida:

 

Kichwa

<header>
  <h1>Guide to Search Engines</h1>
</header>

Nav

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 

Sehemu

<section>
  <h2>Internet Browsers</h2>
  <p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>

Kifungu

<article>
  <h3>Google Chrome</h3>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
 

Kando (pembeni)

<p>Google Chrome is a cross-platform web browser developed by Google.</p>

<aside>
  <h4>History of Mozilla</h4>
  <p>Mozilla is a free software community founded in 1998.</p>
</aside>

Kijachini

<footer>
  <p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>
 

Mifano ya Utengenezaji Nakala ya Msingi

Vichwa kwa

<h1>Heading level 1</h1>
 <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
   <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
     <h6>Heading level 6</h6>

Kifungu ( & )

<p>Paragraph of text with a sentence of words.</p>

<p>Paragraph of text with a word that has <em>emphasis</em>.</p>

<p>Paragraph of text with a word that has <strong>importance</strong>.</p>
 

Haijapangwa na kuamuru orodha

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ul>

<ol>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ol>

Nukuu ya kuzuia na kutaja

<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
  <cite>– Aldous Huxley, Brave New World</cite>
 

Kiungo

<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>

Kitufe

<button name="button">I am a Button. Click me!</button>
 

Uvunjaji wa mstari

<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>

Mstari wa usawa

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>
 

Anwani

<address>
Acme Inc<br>
PO Box 555, New York, USA<br>
Call us: <a href="tel:+1-555-555-555">+1-555-555-555</a><br>
Email us: <a href="mailto:[email protected]">[email protected]</a>
</address>

Hati ndogo na hati kuu

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>
 

Kifupisho

<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>

Kanuni

<p>This is normal text. <code>This is code.</code> This is normal text.</p>
 

Wakati

<p>The movie starts at <time>20:00</time>.</p>

Imefutwa

<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>
 

Mifano ya Meza

Jedwali kichwa, mwili na mguu mfano

<table>
<thead>
     <tr> ...table header... </tr>
</thead>
<tfoot>
     <tr> ...table footer... </tr>
</tfoot>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
</tbody>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
     <tr> ...third row... </tr>
</tbody>
</table>

Vichwa vya meza, safu na mfano wa data

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>34</td>
  </tr>
</table>
 

Mifano ya Vyombo vya Habari

Picha

<img src="images/dinosaur.png" 
     alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>

Picha

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
 

Kielelezo

<figure>
    <img src="/images/frog.png" alt="Tree frog" />
    <figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>

Video

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="rabbit.mp4" type="video/mp4">
  <source src="rabbit.webm" type="video/webm">
  <source src="rabbit.ogg" type="video/ogg"> 
  <source src="rabbit.mov" type="video/quicktime">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit.mp4">link to the video</a> instead.</p>
</video>
 

Jaza Karatasi ya Kudanganya ya HTML

Iwe wewe ni msanidi programu aliye na msimu au mtu ambaye anatafuta tu kunyosha miguu kwenye tasnia, inasaidia kila wakati kuwa na Karatasi ya kudanganya ya HTML rahisi. Na nimebuni moja ambayo inaweza kukusaidia kila hatua.

html karatasi ya kudanganya

 

Pakua Karatasi ya Kudanganya ya HTML

 

CSS ni nini?

Karatasi za Sinema za Kuacha au CSS inaelezea jinsi vitu vya HTML vitaonyeshwa kwenye skrini. Kwa sababu inaweza kudhibiti mipangilio ya kurasa nyingi kwa wakati mmoja, inaweza kukuokoa muda mwingi na bidii.

CSS ni lugha ya kuelezea uwasilishaji wa kurasa za Wavuti, pamoja na rangi, mpangilio, na fonti. Inaruhusu mtu kubadilisha uwasilishaji kwa aina tofauti za vifaa, kama skrini kubwa, skrini ndogo, au printa. - kutoka W3.org

Kuna tofauti gani kati ya HTML na CSS?

Wakati HTML na CSS zote ni lugha zinazotumika kujenga kurasa za wavuti na matumizi, zina kazi tofauti.

HTML ndio unayotumia kuamuru muundo na yaliyomo ambayo yataonyeshwa kwenye ukurasa wa wavuti.

CSS, kwa upande mwingine, hutumiwa kwa kubadilisha muundo wa web design ya vitu vya HTML kwenye ukurasa wa wavuti (pamoja na mpangilio, athari za kuona, na rangi ya usuli).

HTML inaunda muundo na yaliyomo, CSS inafanya muundo au mtindo. Pamoja, HTML na CSS huunda kiolesura cha ukurasa wa wavuti.

Syntax ya CSS ni nini?

Sintaksia ya CSS imeundwa na kiteuzi na kizuizi cha tamko.

Kichaguzi huamua kipengee cha HTML kuwa cha mtindo wakati kizuizi cha tamko kina tamko moja au zaidi au jozi za CSS jina la mali na thamani iliyo na koloni kati yao.

Azimio limetengwa na semicoloni na vizuizi vya tamko kila wakati vimefungwa kwenye braces zilizopindika.

Kwa mfano, ikiwa unataka kurekebisha jinsi kichwa chako cha 1 kinaonekana, syntax yako ya CSS itaonekana kama kitu kama hiki: h1 {color: red; saizi ya fonti: 16pc;}

Jaza Karatasi ya Kudanganya ya CSS

CSS ni rahisi kutumia. Changamoto ni kwamba kuna wateule wengi na matamko kwamba kukumbuka yote ni ngumu ikiwa haiwezekani. Sio lazima uwakariri, ingawa.

Hapa kuna faili ya kudanganya karatasi ya CSS na CSS3 ambayo unaweza kutumia wakati wowote.

Karatasi ya Kudanganya ya CSS

 

Pakua Karatasi ya Kudanganya ya CSS

 

PHP ni nini?

PHP ni kifupi cha Mtangulizi wa maandishi, chanzo wazi maarufu, lugha ya maandishi iliyowekwa ndani ya HTML inayotumika kukuza tovuti zenye nguvu, matumizi ya wavuti, au tovuti za tuli.

Tangu PHP ni lugha ya upande wa seva, hati zake zinatekelezwa kwenye seva (sio kwenye kivinjari), na pato lake ni HTML wazi kwenye kivinjari.

PHP ni lugha inayotumiwa sana ya maandishi ya kusudi la jumla ambayo inafaa sana kwa ukuzaji wa wavuti na inaweza kuingizwa kwenye HTML. - kutoka PHP.net

Lugha hii ya upande wa seva inaendesha mifumo anuwai ya uendeshaji, pamoja na Windows, Mac OS, Linux, na Unix. Inatumika pia na seva nyingi kama vile Apache na IIS.

Ikilinganishwa na lugha zingine kama ASP na JSP, PHP ni rahisi kujifunza kwa Kompyuta. PHP pia inatoa huduma nyingi ambazo watengenezaji wa kiwango cha hali ya juu wanahitaji.

Kuna tofauti gani kati ya PHP na HTML?

Ingawa lugha zote mbili ni muhimu kwa mtandao wa maendeleo, PHP na HTML ni tofauti kwa njia kadhaa.

Tofauti kuu iko katika kile lugha mbili hutumiwa.

HTML hutumiwa kwa upande wa mteja (au mbele-mwisho) maendeleo, wakati PHP hutumiwa kwa upande wa seva maendeleo.

HTML ni watengenezaji wa lugha wanaotumia kuandaa yaliyomo kwenye wavuti, kama vile kuingiza maandishi, picha, meza, na viungo, muundo wa maandishi, na kubainisha rangi.

Wakati huo huo, PHP hutumiwa kuhifadhi na kupata data kutoka kwa hifadhidata, kufanya shughuli za kimantiki, kutuma na kujibu barua pepe, kupakia na kupakua faili, kukuza matumizi ya eneo-kazi, na zaidi.

Kwa upande wa aina ya nambari, HTML ni tuli wakati PHP ina nguvu. Nambari ya HTML huwa sawa kila wakati inafunguliwa, wakati matokeo ya PHP yanatofautiana kulingana na kivinjari cha mtumiaji.

Kwa watengenezaji mpya, lugha zote mbili ni rahisi kujifunza, ingawa safu ya kujifunza ni fupi na HTML kuliko PHP.

Jaza Karatasi ya Kudanganya ya PHP

Ikiwa wewe ni programu ya novice ambaye anataka kuwa na ujuzi zaidi katika PHP au kupanua ujuzi wako juu yake, hapa kuna Karatasi ya kudanganya ya PHP unaweza kutaja haraka.

Karatasi hii ya kudanganya ina kazi za PHP - ambazo ni njia za mkato za nambari zinazotumiwa sana - ambazo zimejengwa katika lugha ya maandishi.

Karatasi ya Kudanganya ya PHP

 

Pakua Karatasi ya Kudanganya ya PHP

 

Karatasi ya Kudanganya ya HTML, CSS na PHP

Iwe wewe ni msanidi programu aliye na uzoefu au mtu tu anayeanza kuweka alama, ni vizuri kuwa na kitu ambacho unaweza kurudi tena kwa kumbukumbu au kuburudisha kumbukumbu yako tu.

Na kama zawadi kwa watengenezaji ambao hushitaki kati HTML, CSS, na PHP, hapa kuna karatasi ya kudanganya ya mwisho, kamili na kila kitu unachohitaji kujua na kukumbuka kuhusu lugha hizi tatu za kuweka alama:

 

Pakua Karatasi ya Kudanganya ya HTML, CSS & PHP

 

Jiunge na jarida letu

Jiandikishe kwa jarida letu la kila wiki na upate habari mpya za tasnia na mitindo

Kwa kubofya 'kujiandikisha' unakubali yetu masharti ya matumizi na sera ya faragha.