HTML, CSS at PHP: Ang Ultimate Cheat Sheet

Sinulat ni

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

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. Tulad ng naturan, hindi makatotohanang asahan ang higit na 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 na cheat sheet na pinasimulan ng mga mabilis na pag-refresh upang matulungan 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:

HTML

  • Hindi sinusuportahan ang audio at video nang walang suporta ng flash player.
  • Gumagamit ng cookies upang mag-imbak ng pansamantalang data.
  • Hindi pinapayagan ang JavaScipt na tumakbo sa browser.
  • Pinapayagan ang mga vector graphics sa pamamagitan ng paggamit ng iba't ibang mga teknolohiya tulad ng VML, Silver-light, at Flash, bukod sa iba pa.
  • Hindi pinapayagan ang mga drag at drop effects.
  • Gumagana sa lahat ng mas matandang mga browser.
  • Mas kaunting mobile-friendly.
  • Mahaba at kumplikado ang deklarasyon ng Doctype.
  • Walang mga elemento tulad ng nav at header, pati na rin ang mga katangian tulad ng charset, async, at ping.
  • Labis na mahirap makuha ang totoong GeoLocation ng mga gumagamit sa pamamagitan ng paggamit ng isang browser.
  • Hindi mahawakan ang hindi tumpak na syntax.

HTML5

  • Sinusuportahan ang mga kontrol ng audio at video sa paggamit ng at mga tag
  • Gumagamit ng mga database ng SQL at cache ng application upang mag-imbak ng offline na data.
  • Pinapayagan ang JavaScript na gumana sa background gamit ang paggamit ng JS Web worker API.
  • Ang mga vector graphics ay isang pangunahing bahagi ng HTML5, kagaya ng SVG at canvas.
  • Pinapayagan ang mga drag at drop effects.
  • Gawing posible na gumuhit ng mga hugis.
  • Sinusuportahan ang lahat ng mga bagong browser tulad ng Firefox, Mozilla, Chrome, at Safari.
  • Mas mobile-friendly.
  • Ang pagdeklara ng Doctype ay simple at madali.
  • May mga bagong elemento para sa mga istruktura ng web tulad ng nav, header, at footer, bukod sa iba pa, at mayroon ding mga katangian ng charset, isangsync, at ping.
  • Ginagawang simple at madali ang pag-encode ng character.
  • Pinapayagan para sa pagsubaybay sa GeoLocation ng gumagamit sa pamamagitan ng paggamit ng JS GeoLocation API.
  • May kakayahang hawakan ang hindi tumpak na syntax.
 

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

Sa HTML5 mayroong ilang mga elemento ng semantiko na maaaring magamit upang tukuyin ang iba't ibang mga bahagi ng isang web page. Narito ang mga pinaka-karaniwang mga:

 

Header

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

Seksyon

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

Artikulo

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

Aside (sidebar)

<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

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

Pangunahing Mga Halimbawa ng Pag-format ng Teksto

Mga heading sa

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

Talata ( & )

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

Hindi nakaayos at inorder na listahan

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

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

Blockquote at banggitin

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

Link

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

Pindutan

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

Line break

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

Pahalang na linya

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

Address

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

Subscript at superscript

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

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

Pagpapaikli

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

Code

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

Oras

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

Tinanggal

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

Mga Halimbawa ng Talahanayan

Halimbawa ng ulo, katawan at paa ng mesa

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

Mga heading ng talahanayan, mga hilera at halimbawa ng 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>
 

Mga Halimbawa sa Media

Larawan

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

Larawan

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

Larawan

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

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 HTML cheat sheet madaling gamiting At dinisenyo ko ang isa na makakatulong sa iyo sa bawat hakbang.

html cheat sheet

 

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 onscreen. 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 sapat na madaling 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.

Sheet ng Cheat ng CSS

 

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.

PHP Cheat Sheet

 

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

 

Sumali sa aming newsletter

Mag-subscribe sa aming lingguhang roundup na newsletter at makuha ang pinakabagong mga balita at trend sa industriya

Sa pamamagitan ng pag-click sa 'subscribe" sumasang-ayon ka sa aming mga tuntunin ng paggamit at patakaran sa privacy.