HTML, CSS և PHP. The Ultimate Cheat Sheet

📥 Ներբեռնեք իմ HTML, CSS և PHP խաբեության թերթիկներ, լրացրեք այն ամենը, ինչ դուք պետք է իմանաք և հիշեք այս երեք կոդավորման լեզուների վերաբերյալ:

• Ինչ է HTML-ը:
• HTML5 օրինակներ (Code PlayGround)
• 📥 HTML խաբեության թերթիկ
• Ի՞նչ է CSS- ը:
• 📥 CSS խաբեության թերթիկ
• Ի՞նչ է PHP-ն:
• 📥 PHP խաբեության թերթիկ
• 📥 HTML CSS և PHP խաբեության թերթիկ

Կոդավորման արվեստը կարող է տարիներ տևել ծրագրավորման լեզուների բոլոր թեգերի, շարահյուսությունների և հաճախ միահյուսված այլ տարրերի լիարժեք տիրապետման համար:

Նույնիսկ ավելի փորձառու մշակողները կարող են ընկնել որոշակի առաջադրանքների համար ճիշտ շարահյուսությունը մոռանալու թակարդը: Որպես այդպիսին, ավելի շատ կանաչ ակնկալելն իրատեսական չէ Վեբ մշակողներ ունենալ արվեստի անթերի ընկալում:

Սա է պատճառը, խաբեության թերթիկներ HTML-ի, CSS-ի և PHP-ի համար չափազանց օգտակար են՝ անկախ նրանից, թե որքան ժամանակ եք մարզվում: Այն ծառայում է որպես արագ ուղեցույց՝ գտնելու ճիշտ հրամաններ և շարահյուսություններ՝ թույլ տալով կենտրոնանալ իրական վեբ զարգացման վրա:

Ստորև դուք կգտնեք տեսողականորեն հակված խաբեության թերթիկներ, որոնց նախորդում են արագ թարմացումներ, որոնք կօգնեն ձեզ ձեր կոդավորման ջանքերում: Ես նաև պատրաստել եմ այն, որպեսզի այն հեշտությամբ էջանշվի, պահպանվի կամ տպվի ձեր հարմարության համար:

Ինչ է HTML-ը:

HTML-ը նշանակում է Hypertext Markup Language – կոդ, որն օգտագործվում է վեբ էջի կառուցվածքը և դրա բովանդակությունը ստեղծելու համար:

Նշման այս լեզուն բաղկացած է մի շարք տարրերից, որոնք օգտագործվում են բովանդակությունը որոշակի ձևով երևալու կամ գործելու համար և յուրաքանչյուր վեբ կայքի ճակատային կոդի հիմնական մասն է:

HTML-ը վեբ էջերի կառուցվածքը նկարագրելու լեզու է… HTML-ով հեղինակները նկարագրում են էջերի կառուցվածքը՝ օգտագործելով նշագրում: Լեզվի տարրերը նշում են բովանդակության այնպիսի մասեր, ինչպիսիք են պարբերությունը, ցուցակը, աղյուսակը և այլն: – W3.org-ից

Օրինակ, դուք կարող եք կցել կամ փաթաթել բովանդակության տարբեր մասեր, որտեղ կցվող պիտակները կարող են բառի կամ պատկերի հիպերհղում կատարել մեկ այլ էջ: Դուք կարող եք նաև օգտագործել սա՝ ի թիվս այլոց, բառերը շեղելու և տառատեսակները մեծ կամ փոքրացնելու համար:

Ինչպես նշել է W3, որոշ այլ բաներ, որոնք HTML-ը թույլ է տալիս անել, ներառում են.

• Առցանց փաստաթղթերի հրապարակում հետ վերնագրեր, տեքստ, աղյուսակներ, ցուցակներ, լուսանկարներԵւ այլն:
• Օնլայն տեղեկատվության առբերում՝ կոճակի սեղմումով հիպերտեքստային հղումներ.
• Նախագծող ձեւեր դեպի հեռահար ծառայությունների հետ գործարքներ իրականացնելու համար որոնել տեղեկատվություն, կատարել ամրագրումներ կամ պատվիրել ապրանքներ, ի թիվս այլ գործառույթների:
• Ներառյալ աղյուսակներ, տեսահոլովակներ և այլ լրատվամիջոցներ և դիմումներն արդեն ձեր փաստաթղթերում:

Այսպիսով, եթե դուք պետք է կատարեք գիծը «Իմ շունը շատ քաղցր է» կանգնեք ինքնուրույն, կարող եք նշել, որ դա պարբերություն է՝ պարբերությունների պիտակներում կցելով (այս մասին ավելի ուշ), որը նման կլինի. Իմ շունը շատ քաղցր է

Ո՞րն է տարբերությունը HTML-ի և HTML5-ի միջև:

Քանի որ անունը հուշում է, HTML5-ը HTML ստանդարտի հինգերորդ տարբերակն է. Այն աջակցում է վիդեո և աուդիո լեզվի ինտեգրմանը, ինչը նվազեցնում է երրորդ կողմի հավելումների և տարրերի կարիքը:

Ստորև ներկայացված են HTML-ի և HTML5-ի հիմնական տարբերությունները.

Բացի այդ, կան HTML-ի շատ տարրեր, որոնք կամ փոփոխվել են կամ հեռացվել HTML5-ից: Դրանք ներառում են.

• - Փոխվել է
• - Փոխվել է
• - Փոխվել է
• - Հեռացված
• - Հեռացված
• - Հեռացված
• - Նոր պիտակ չկա: Օգտագործում է CSS:
• - Նոր պիտակ չկա: Օգտագործում է CSS:
• - Նոր պիտակ չկա: Օգտագործում է CSS:
• - Նոր պիտակ չկա: Օգտագործում է CSS:
• - Նոր պիտակ չկա: Օգտագործում է CSS:

Մինչդեռ HTML5-ը ներառում է նաև մի շարք նոր ավելացված տարրեր։ Դրանք ներառում են.

HTML5 օրինակներ (Code PlayGround)

Իմաստային կառուցվածքի օրինակներ

In HTML5 կան որոշ իմաստային տարրեր, որոնք կարող են օգտագործվել վեբ էջի տարբեր մասեր սահմանելու համար: Ահա ամենատարածվածները.

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

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

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

<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>

<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>

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

Հիմնական տեքստի ձևաչափման օրինակներ

<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>

<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>

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

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

<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>

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

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

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

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

<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>

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

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

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

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

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

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

Սեղանի օրինակներ

<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>

<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>

Մեդիա օրինակներ

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

<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>

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

<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>

Լրացրեք HTML խաբեության թերթիկը

Անկախ նրանից, թե դուք փորձառու ծրագրավորող եք, թե մեկը, ով պարզապես ձգտում է ոտքերը թրջել ոլորտում, միշտ օգնում է ունենալ HTML ձևաչափման խաբեության թերթիկ հարմար. Եվ ես նախագծել եմ մեկը, որը կարող է օգնել ձեզ ամեն քայլափոխի:

Ներբեռնեք HTML խաբեության թերթիկը

Ի՞նչ է CSS- ը:

Կասկադային ոճերի թերթիկներ կամ CSS նկարագրում է, թե ինչպես HTML տարրերը կցուցադրվեն էկրանին: Քանի որ այն կարող է կառավարել մի քանի էջերի դասավորությունը միաժամանակ, այն կարող է խնայել ձեզ շատ ժամանակ և ջանք:

CSS-ը վեբ էջերի ներկայացումը նկարագրելու լեզուն է՝ ներառյալ գույները, դասավորությունը և տառատեսակները: Այն թույլ է տալիս հարմարեցնել ներկայացումը տարբեր տեսակի սարքերի, ինչպիսիք են մեծ էկրանները, փոքր էկրանները կամ տպիչները: – W3.org-ից

Ո՞րն է տարբերությունը HTML-ի և CSS-ի միջև:

Թեև HTML-ը և CSS-ը երկուսն էլ լեզուներ են, որոնք օգտագործվում են վեբ էջեր և հավելվածներ ստեղծելու համար, նրանք ունեն տարբեր գործառույթներ:

HTML-ն այն է, ինչ դուք օգտագործում եք՝ թելադրելու կառուցվածքը և բովանդակությունը, որը կցուցադրվի վեբ էջում:

CSS-ը, մյուս կողմից, օգտագործվում է փոփոխության համար Վեբ դիզայն վեբ էջի HTML տարրերից (ներառյալ դասավորությունը, տեսողական էֆեկտները և ֆոնի գույնը):

HTML-ը ստեղծում է կառուցվածքը և բովանդակությունը, CSS-ը կատարում է դիզայնը կամ ոճը: HTML-ը և CSS-ը միասին կազմում են վեբ էջի ինտերֆեյսը:

Ի՞նչ է CSS շարահյուսությունը:

CSS շարահյուսություն կազմված է ընտրիչից և հայտարարագրման բլոկից:

Ընտրիչը որոշում է ոճավորվող HTML տարրը, մինչդեռ հայտարարագրման բլոկը պարունակում է մեկ կամ մի քանի հայտարարություններ կամ CSS-ի զույգեր՝ սեփականության անուն և արժեք, որի միջև ընկած է երկու կետ:

Հայտարարությունները բաժանվում են կետ-ստորակետերով, իսկ հայտարարագրերի բլոկները միշտ փակվում են գանգուր փակագծերի մեջ:

Օրինակ, եթե ցանկանում եք փոփոխել ձեր վերնագրի 1 տեսքը, ձեր CSS շարահյուսությունը նման կլինի հետևյալին. h1 {color:red; տառատեսակի չափը՝ 16 հատ;}

Լրացրեք CSS խաբեության թերթիկը

CSS-ը բավականին հեշտ է օգտագործել: Խնդիրն այն է, որ կան բազմաթիվ ընտրողներ և հայտարարություններ, որոնց մասին հիշելը դժվար է, եթե ոչ անհնար: Այնուամենայնիվ, պետք չէ դրանք անգիր անել:

Ահա մի խաբեության թերթիկ CSS-ի և CSS3-ի համար որը կարող եք օգտագործել ցանկացած ժամանակ:

Ներբեռնեք CSS խաբեության թերթիկը

Ի՞նչ է PHP-ն:

PHP-ն Hypertext Preprocessor-ի հապավումն է, հայտնի բաց կոդով, HTML ներկառուցված սկրիպտային լեզու, որն օգտագործվում է դինամիկ կայքերի, վեբ հավելվածների կամ ստատիկ կայքերի մշակման համար։

Հետո PHP-ն սերվերի կողմի լեզու է, դրա սկրիպտները կատարվում են սերվերում (ոչ բրաուզերում), և դրա ելքը բրաուզերի վրա պարզ HTML է։

PHP-ն լայնորեն օգտագործվող բաց կոդով ընդհանուր նշանակության սկրիպտային լեզու է, որը հատկապես հարմար է վեբ մշակման համար և կարող է ներառվել HTML-ում: – PHP.net-ից

Այս սերվերի կողմից սկրիպտային լեզուն աշխատում է մի շարք օպերացիոն համակարգերի վրա, ներառյալ Windows, Mac OS, Linux և Unix: Այն նաև համատեղելի է սերվերների մեծ մասի հետ, ինչպիսիք են Apache-ն և IIS-ը:

Համեմատած այլ լեզուների հետ, ինչպիսիք են ASP-ը և JSP-ն, PHP-ն հեշտ է սովորել սկսնակների համար: PHP-ն առաջարկում է նաև բազմաթիվ հնարավորություններ, որոնք անհրաժեշտ են առաջադեմ մակարդակի ծրագրավորողներին:

Ո՞րն է տարբերությունը PHP-ի և HTML-ի միջև:

Թեև երկու լեզուներն էլ կարևոր նշանակություն ունեն Վեբ մշակում, PHP-ն և HTML-ը տարբեր են մի քանի առումներով:

Հիմնական տարբերությունը կայանում է նրանում, թե ինչի համար են օգտագործվում երկու լեզուները:

HTML-ն օգտագործվում է հաճախորդի կողմից (կամ ճակատային) զարգացում, մինչդեռ PHP-ն օգտագործվում է սերվերի կողմից զարգացում.

HTML-ն այն լեզուն է, որը մշակողները օգտագործում են վեբկայքում բովանդակություն կազմակերպելու համար, օրինակ՝ տեքստ, պատկերներ, աղյուսակներ և հիպերհղումներ տեղադրելու, տեքստի ձևաչափում և գույներ նշելու համար:

Միևնույն ժամանակ, PHP-ն օգտագործվում է տվյալների բազայից տվյալների պահպանման և առբերման, տրամաբանական գործողություններ կատարելու, էլ. նամակներին ուղարկելու և պատասխանելու, ֆայլեր վերբեռնելու և ներբեռնելու, աշխատասեղանի հավելվածներ մշակելու և այլնի համար:

Կոդի տեսակի առումով՝ HTML-ը ստատիկ է, մինչդեռ PHP-ն դինամիկ է. HTML կոդը միշտ նույնն է ամեն անգամ, երբ այն բացվում է, մինչդեռ PHP-ի արդյունքները տարբերվում են՝ կախված օգտագործողի բրաուզերից:

Նոր ծրագրավորողների համար երկու լեզուներն էլ հեշտ են սովորել, թեև HTML-ով ուսուցման կորը ավելի կարճ է, քան PHP-ն:

Լրացրեք PHP խաբեության թերթիկը

Եթե ​​դուք սկսնակ ծրագրավորող եք, ով ցանկանում է ավելի լավ տիրապետել PHP-ին կամ ընդլայնել ձեր գիտելիքները դրա վերաբերյալ, ահա. PHP խաբեության թերթիկ կարող եք արագ անդրադառնալ.

Այս խաբեության թերթիկը բաղկացած է PHP ֆունկցիաներից, որոնք դյուրանցումներ են լայնորեն օգտագործվող կոդերի համար, որոնք ներկառուցված են սկրիպտավորման լեզվում:

Ներբեռնեք PHP խաբեության թերթիկը

Վերջնական HTML, CSS և PHP խաբեության թերթիկ

Անկախ նրանից, թե դուք փորձառու ծրագրավորող եք, թե պարզապես մեկը, ով սկսում է կոդավորումը, հիանալի է ունենալ մի բան, որին միշտ կարող եք վերադառնալ հղում կամ պարզապես թարմացնել ձեր հիշողությունը:

Եվ որպես նվեր ծրագրավորողներին, ովքեր ձեռնածություն են անում HTML, CSS և PHP, ահա ՎԵՐՋԻՆ խաբեության թերթիկը, լրացրեք այն ամենը, ինչ դուք պետք է իմանաք և հիշեք այս երեք կոդավորման լեզուների վերաբերյալ.

Ներբեռնեք համակցված HTML, CSS և PHP խաբեության թերթիկ