HTML, CSS at PHP: Ang Ultimate Cheat Sheet

📥 I-download ang aking HTML, CSS at PHP cheat sheet, kumpleto sa lahat ng kailangan mong malaman at tandaan tungkol sa tatlong wikang pag-coding.

• Ano ang HTML?
• Mga Halimbawa ng HTML5 (Code PlayGround)
• 📥 HTML Cheat Sheet
• Ano ang CSS?
• 📥 CSS Cheat Sheet
• Ano ang PHP?
• 📥 PHP Cheat Sheet
• 📥 HTML CSS at PHP Cheat Sheet

Ang sining ng pag-coding ay maaaring tumagal ng maraming taon upang ganap na makabisado sa lahat ng mga tag, syntaxes, at iba pang mga elemento ng mga wika sa pagprograma na madalas na magkakaugnay.

Kahit na ang mas may karanasan na mga developer ay maaaring mahulog sa bitag ng pagkalimot sa tamang syntax para sa mga partikular na gawain. Dahil dito, hindi makatotohanang umasa ng higit pang berde mga web developer upang magkaroon ng isang walang kamali-mali pag-unawa ng sining.

Ito ay kung bakit cheat sheet para sa HTML, CSS, at PHP ay lubos na kapaki-pakinabang, hindi alintana kung gaano mo katagal nagsasanay. Nagsisilbi itong isang mabilis na gabay sa paghahanap ng tamang mga utos at syntaxes, na nagbibigay-daan sa iyo upang tumutok sa aktwal na pagbuo ng web.

Sa ibaba, mahahanap mo ang mga hilig sa pandaraya na sheet na sinundan ng mabilis na mga pag-refresh upang tulungan ka sa iyong mga pagsusumikap sa pag-coding. Ginawa ko rin ito upang madaling mai-bookmark, mai-save, o mai-print para sa iyong kaginhawaan.

Ano ang HTML?

Ang HTML ay nangangahulugang Hypertext Markup Language - isang code na ginamit upang likhain ang istraktura para sa isang web page at nilalaman nito.

Ang wikang markup na ito ay binubuo ng isang serye ng mga elemento na ginamit upang ipakita ang nilalaman o gumana sa isang tiyak na paraan at isang pangunahing bahagi ng front-end code ng bawat website.

Ang HTML ay ang wika para sa paglalarawan ng istraktura ng mga pahina sa Web ... Sa HTML, inilalarawan ng mga may-akda ang istraktura ng mga pahina gamit ang markup. Ang mga elemento ng mga piraso ng nilalaman ng label ng wika tulad ng talata, listahan, talahanayan, at iba pa. - mula sa W3.org

Halimbawa, maaari mong i-enclose o balutin ang iba't ibang mga bahagi ng nilalaman - kung saan ang mga nakapaloob na mga tag ay maaaring gumawa ng isang salita o imahe na hyperlink sa ibang pahina. Maaari mo ring gamitin ito upang italiko ang mga salita at gawing mas malaki o mas maliit ang mga font, bukod sa iba pa.

Tulad ng nabanggit sa pamamagitan ng W3, ilan sa iba pang mga bagay na pinapayagan ng HTML na isama ang:

• Pag-publish ng mga online na dokumento sa mga heading, teksto, talahanayan, listahan, larawan, Atbp
• Kinukuha ang online na impormasyon sa pag-click ng isang pindutan sa pamamagitan ng hypertext na mga link.
• Pagguhit ng plano forms para sa pagsasagawa ng mga transaksyon sa mga malalayong serbisyo sa maghanap para sa impormasyon, magpareserba, o mag-order ng mga produkto, bukod sa iba pang mga pagpapaandar.
• Kabilang mga spreadsheet, video clip, at iba pang media at mga application na nasa iyong mga dokumento.

Kaya kung gagawin mo ang linya "Napakasarap ng aso ko" tumayo nang mag-isa, maaari mong tukuyin na ito ay isang talata sa pamamagitan ng pag-enclose nito sa mga tag ng mga talata (higit pa dito sa paglaon), na magiging katulad ng: Napakasarap ng aso ko

Ano ang pagkakaiba sa pagitan ng HTML at HTML5?

Bilang ang pangalan, Ang HTML5 ay ang ikalimang bersyon ng pamantayan ng HTML. Sinusuportahan nito ang pagsasama ng video at audio sa wika, na binabawasan ang pangangailangan para sa mga third-party na plugin at elemento.

Nasa ibaba ang mga pangunahing pagkakaiba sa pagitan ng HTML at HTML5:

Bilang karagdagan, maraming mga elemento ng HTML na maaaring nabago o inalis mula sa HTML5. Kabilang dito ang:

• - Binago sa
• - Binago sa
• - Binago sa
• - Inalis
• - Inalis
• - Inalis
• - Walang bagong tag. Gumagamit ng CSS.
• - Walang bagong tag. Gumagamit ng CSS.
• - Walang bagong tag. Gumagamit ng CSS.
• - Walang bagong tag. Gumagamit ng CSS.
• - Walang bagong tag. Gumagamit ng CSS.

Samantala, nagsasama rin ang HTML5 ng isang bilang ng mga bagong idinagdag na elemento. Kabilang dito ang:

Mga Halimbawa ng HTML5 (Code PlayGround)

Mga Halimbawa ng Kayarian ng Semantic

In HTML5 may ilang semantic na elemento na maaaring gamitin upang tukuyin ang iba't ibang bahagi ng isang web page. Narito ang mga pinakakaraniwan:

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

Pangunahing Mga Halimbawa ng Pag-format ng Teksto

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

Mga Halimbawa ng Talahanayan

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

Mga Halimbawa sa Media

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

Kumpletuhin ang HTML Cheat Sheet

Kung ikaw man ay isang bihasang developer o isang tao na naghahanap lamang upang mabasa ang kanilang mga paa sa industriya, palaging nakakatulong na magkaroon cheat sheet sa pag-format ng HTML madaling gamiting At dinisenyo ko ang isa na makakatulong sa iyo sa bawat hakbang.

Mag-download ng HTML Cheat Sheet

Ano ang CSS?

Mga Cascading Style Sheet o CSS naglalarawan kung paano ipapakita ang mga elemento ng HTML sa screen. Dahil makokontrol nito ang mga layout ng maraming pahina nang sabay, maaari kang makatipid ng maraming oras at pagsisikap.

Ang CSS ang wika para sa pagsasalarawan ng pagtatanghal ng mga web page, kabilang ang mga kulay, layout, at font. Pinapayagan nito ang isa na iakma ang pagtatanghal sa iba't ibang mga uri ng mga aparato, tulad ng malalaking mga screen, maliit na mga screen, o mga printer. - mula sa W3.org

Ano ang Pagkakaiba sa Pagitan ng HTML at CSS?

Habang ang HTML at CSS ay parehong mga wikang ginagamit upang bumuo ng mga webpage at application, mayroon silang magkakaibang pag-andar.

Ang HTML ang ginagamit mo upang idikta ang istraktura at ang nilalaman na ipapakita sa webpage.

Ang CSS, sa kabilang banda, ay ginagamit para sa pagbabago ng web design ng mga elemento ng HTML sa webpage (kasama ang layout, visual effects, at kulay ng background).

Lumilikha ang HTML ng istraktura at nilalaman, ginagawa ng CSS ang disenyo o istilo. Sama-sama, ang HTML at CSS ay bumubuo sa isang webpage interface.

Ano ang CSS Syntax?

CSS Syntax ay binubuo ng isang tagapili at isang bloke ng deklarasyon.

Tinutukoy ng tagapili ang elemento ng HTML na mai-istilo habang ang block ng deklarasyon ay naglalaman ng isa o higit pang mga deklarasyon o pares ng CSS isang pangalan ng pag-aari at isang halaga na may isang colon sa pagitan nila.

Ang mga deklarasyon ay pinaghihiwalay ng mga semicolon at ang mga bloke ng deklarasyon ay laging nakapaloob sa mga kulot na tirante.

Halimbawa, kung nais mong baguhin ang hitsura ng iyong heading 1, ang iyong CSS syntax ay magiging ganito: h1 {color: red; laki ng font: 16pc;}

Kumpletuhin ang CSS Cheat Sheet

Ang CSS ay madaling sapat upang magamit. Ang hamon ay maraming mga pipili at deklarasyon na ang pag-alala sa kanilang lahat ay mahirap kung hindi imposible. Gayunpaman, hindi mo kailangang kabisaduhin.

Narito ang isang cheat sheet para sa CSS at CSS3 na maaari mong gamitin anumang oras.

Mag-download ng CSS Cheat Sheet

Ano ang PHP?

Ang PHP ay isang akronim para sa Hypertext Preprocessor, isang tanyag na open-source, wikang script na naka-embed na HTML na ginamit para sa pagbuo ng mga pabuong website, web application, o static na mga website.

Dahil sa Ang PHP ay isang wika sa server, ang mga script nito ay naisakatuparan sa server (wala sa browser), at ang output nito ay isang simpleng HTML sa browser.

Ang PHP ay isang malawakang ginamit na open source na pangkalahatang-layunin na wika ng scripting na angkop para sa pag-unlad ng web at maaaring mai-embed sa HTML. - mula sa PHP.net

Ang wika ng scripting sa panig ng server na ito ay tumatakbo sa iba't ibang mga operating system, kabilang ang Windows, Mac OS, Linux, at Unix. Tugma din ito sa karamihan ng mga server tulad ng Apache at IIS.

Kung ikukumpara sa ibang mga wika tulad ng ASP at JSP, madaling matutunan ang PHP para sa mga nagsisimula. Nag-aalok din ang PHP ng maraming mga tampok na kailangan ng mga advanced na antas na developer.

Ano ang Pagkakaiba sa Pagitan ng PHP at HTML?

Bagaman ang parehong mga wika ay mahalaga sa web development, Ang PHP at HTML ay magkakaiba sa maraming paraan.

Ang pangunahing pagkakaiba ay nakasalalay sa kung saan ginagamit ang dalawang wika.

Ginagamit ang HTML para sa panig ng kliyente (o front-end) pag-unlad, habang Ang PHP ay ginagamit para sa server-side -develop.

Ang HTML ay ginagamit ng mga developer ng wika para sa pag-aayos ng nilalaman sa isang website, tulad ng pagpasok ng teksto, mga imahe, talahanayan, at hyperlink, pag-format ng teksto, at pagtukoy ng mga kulay.

Samantala, ginagamit ang PHP upang mag-imbak at makuha ang data mula sa isang database, magsagawa ng mga lohikal na pagpapatakbo, magpadala at tumugon sa mga email, mag-upload at mag-download ng mga file, bumuo ng mga aplikasyon sa desktop, at marami pa.

Sa mga tuntunin ng uri ng code, Static ang HTML habang ang PHP ay pabago-bago. Ang isang HTML code ay palaging pareho sa tuwing binubuksan ito, habang ang mga resulta ng PHP ay nag-iiba depende sa browser ng gumagamit.

Para sa mga bagong developer, ang parehong mga wika ay madaling matutunan, kahit na ang kurba sa pag-aaral ay mas maikli sa HTML kaysa sa PHP.

Kumpletuhin ang PHP Cheat Sheet

Kung ikaw ay isang baguhan na programmer na nais na maging mas bihasa sa PHP o palawakin ang iyong kaalaman tungkol dito, narito ang a PHP cheat sheet maaari mong mabilis na sumangguni sa.

Ang cheat sheet na ito ay binubuo ng mga pagpapaandar ng PHP - na mga shortcut para sa malawak na ginamit na mga code - na binuo sa wikang scripting.

Mag-download ng PHP Cheat Sheet

Ang Ultimate HTML, CSS at PHP Cheat Sheet

Kung ikaw man ay isang bihasang developer o isang tao lamang na nagsisimulang mag-coding, mahusay na magkaroon ng isang bagay na maaari mong palaging babalik para sa sanggunian o i-refresh lamang ang iyong memorya.

At bilang isang regalo sa mga developer na nakikipag-juggle sa pagitan HTML, CSS, at PHP, narito ang isang ULTIMATE cheat sheet, kumpleto sa lahat ng kailangan mong malaman at tandaan tungkol sa tatlong wikang pag-coding na ito:

Mag-download ng Pinagsamang HTML, CSS & PHP Cheat Sheet