HTML, CSS og PHP: Ultimate Cheat Sheet

📥 Sæktu mína HTML, CSS og PHP svindlblöð, heill með öllu sem þú þarft að vita og muna varðandi þessi þrjú kóðunarmál.

• Hvað er HTML?
• HTML5 dæmi (Code PlayGround)
• 📥 HTML svindlblað
• Hvað er CSS?
• 📥 CSS svindlblað
• Hvað er PHP?
• 📥 PHP svindlblað
• 📥 HTML CSS og PHP svindlblað

Kóðunarlistin getur tekið mörg ár að ná fullum tökum með öllum merkjum, setningafræði og öðrum þáttum forritunarmála sem oft eru samtvinnuð.

Jafnvel reyndari forritarar geta fallið í þá gryfju að gleyma réttri setningafræði fyrir ákveðin verkefni. Sem slíkt er óraunhæft að búast við meira grænu vefur verktaki að hafa gallalaus tök á listinni.

Þetta er ástæðan svindlblöð fyrir HTML, CSS og PHP eru mjög gagnlegar, óháð því hversu lengi þú hefur æft. Það þjónar sem fljótleg leiðarvísir til að finna réttar skipanir og setningafræði, sem gerir þér kleift að einbeita þér að raunverulegri vefþróun.

Hér að neðan finnurðu sjónræn svindlblöð á undan hraðuppfærslum til að aðstoða þig við kóðunarviðleitni þína. Ég hef líka gert það til að vera auðvelt að bókamerki, vista það eða prenta það til þæginda.

Hvað er HTML?

HTML stendur fyrir Hypertext Markup Language – kóða sem er notaður til að búa til uppbyggingu vefsíðu og innihald hennar.

Þetta álagningarmál samanstendur af röð þátta sem notaðir voru til að láta innihald birtast eða virka á ákveðinn hátt og er stór hluti af framendakóða hvers vefsíðna.

HTML er tungumálið til að lýsa uppbyggingu vefsíðna … Með HTML lýsa höfundar uppbyggingu síðna með því að nota merkingu. Þættirnir í tungumálinu merkja efnishluta eins og málsgrein, lista, töflu og svo framvegis. – frá W3.org

Til dæmis geturðu lokað eða vefjað mismunandi hluta efnisins - þar sem meðfylgjandi merki geta gert orð eða mynd tengil á aðra síðu. Þú getur líka notað þetta til að skáletra orð og gera leturgerðina stærri eða minni, meðal annars.

Eins og fram eftir W3, sumt af því sem HTML gerir þér kleift að gera eru:

• Gefa út skjöl á netinu með fyrirsagnir, texti, töflur, listar, myndirO.fl.
• Að sækja upplýsingar á netinu með því að smella á hnapp í gegnum stiklutenglar.
• Hönnun eyðublöð fyrir viðskipti með fjarþjónustu til leita að upplýsingum, panta eða panta vörur, meðal annarra aðgerða.
• Ásamt töflureiknum, myndinnskotum og öðrum miðlum og forrit sem þegar eru í skjölunum þínum.

Svo ef þú myndir gera línuna „Hundurinn minn er mjög sætur“ standa út af fyrir sig, þú getur tilgreint að það sé málsgrein með því að setja hana inn í málsgreinamerki (meira um þetta síðar), sem myndi líta svona út: Hundurinn minn er mjög sætur

Hver er munurinn á HTML og HTML5?

Eins og nafnið gefur til kynna, HTML5 er fimmta útgáfan af HTML staðlinum. Það styður samþættingu myndbands og hljóðs í tungumálið, sem dregur úr þörfinni fyrir viðbætur og þætti frá þriðja aðila.

Hér að neðan er aðalmunurinn á HTML og HTML5:

Að auki eru margir þættir HTML sem annað hvort hefur verið breytt eða fjarlægt úr HTML5. Þar á meðal eru:

• — Breytt í
• — Breytt í
• — Breytt í
• — Fjarlægt
• — Fjarlægt
• — Fjarlægt
• - Ekkert nýtt merki. Notar CSS.
• - Ekkert nýtt merki. Notar CSS.
• - Ekkert nýtt merki. Notar CSS.
• - Ekkert nýtt merki. Notar CSS.
• - Ekkert nýtt merki. Notar CSS.

Á sama tíma inniheldur HTML5 einnig fjölda nýlega bættra þátta. Þar á meðal eru:

HTML5 dæmi (Code PlayGround)

Merkingarfræðileg uppbygging dæmi

In HTML5 það eru nokkrir merkingarþættir sem hægt er að nota til að skilgreina mismunandi hluta vefsíðunnar. Hér eru þær algengustu:

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

Dæmi um grunn textasnið

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

Töfludæmi

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

Fjölmiðladæmi

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

Ljúktu við HTML svindlblað

Hvort sem þú ert vanur þróunaraðili eða einhver sem er bara að leita að því að koma fótunum fyrir í greininni, þá hjálpar það alltaf að hafa HTML snið svindlari Handlaginn. Og ég hef hannað einn sem gæti hjálpað þér hvert skref á leiðinni.

Sækja HTML svindlblað

Hvað er CSS?

Cascading Style Sheets eða CSS lýsir því hvernig HTML þættir munu birtast á skjánum. Vegna þess að það getur stjórnað uppsetningu margra síðna á sama tíma getur það sparað þér mikinn tíma og fyrirhöfn.

CSS er tungumálið til að lýsa framsetningu vefsíðna, þar á meðal liti, uppsetningu og leturgerðir. Það gerir manni kleift að laga kynninguna að mismunandi gerðum tækja, svo sem stórum skjáum, litlum skjáum eða prenturum. – frá W3.org

Hver er munurinn á HTML og CSS?

Þó að HTML og CSS séu bæði tungumál notuð til að byggja vefsíður og forrit, hafa þau mismunandi aðgerðir.

HTML er það sem þú notar til að segja til um uppbyggingu og innihald sem birtist á vefsíðunni.

CSS er aftur á móti notað til að breyta vefhönnun af HTML þáttunum á vefsíðunni (þar á meðal útlit, sjónræn áhrif og bakgrunnslit).

HTML skapar uppbyggingu og innihald, CSS sér um hönnunina eða stílinn. Saman mynda HTML og CSS vefsíðuviðmót.

Hvað er CSS setningafræði?

CSS setningafræði samanstendur af vali og yfirlýsingablokk.

Valinn ákvarðar HTML-eininguna sem á að stilla á meðan yfirlýsingablokkin inniheldur eina eða fleiri yfirlýsingar eða pör af CSS, eignarheiti og gildi með tvípunkti á milli.

Yfirlýsingar eru aðskildar með semíkommum og yfirlýsingarblokkir eru alltaf lokaðir með krulluðum axlaböndum.

Til dæmis, ef þú vilt breyta því hvernig fyrirsögn 1 lítur út, myndi CSS setningafræði þín líta svona út: h1 {color:red; leturstærð:16pc;}

Ljúktu við CSS svindlblað

CSS er nógu auðvelt í notkun. Áskorunin er sú að það eru margir valmenn og yfirlýsingar um að það sé erfitt ef ekki ómögulegt að muna þá alla. Þú þarft samt ekki að leggja þau á minnið.

Hér er svindlblað fyrir CSS og CSS3 sem þú getur notað hvenær sem er.

Sækja CSS svindlblað

Hvað er PHP?

PHP er skammstöfun fyrir Hypertext Preprocessor, vinsælt opið, HTML-innfellt forskriftarmál notað til að þróa kraftmiklar vefsíður, vefforrit eða kyrrstæðar vefsíður.

Þar PHP er tungumál á netþjóni, forskriftir þess eru keyrðar á þjóninum (ekki í vafranum) og úttak þess er venjulegt HTML í vafranum.

PHP er mikið notað opinn uppspretta almennt forskriftarmál sem hentar sérstaklega vel fyrir vefþróun og er hægt að fella það inn í HTML. – frá PHP.net

Þetta forskriftarmál á netþjóninum keyrir á ýmsum stýrikerfum, þar á meðal Windows, Mac OS, Linux og Unix. Það er líka samhæft við flesta netþjóna eins og Apache og IIS.

Í samanburði við önnur tungumál eins og ASP og JSP er PHP auðvelt að læra fyrir byrjendur. PHP býður einnig upp á fullt af eiginleikum sem háþróaðir forritarar þurfa.

Hver er munurinn á PHP og HTML?

Þótt bæði tungumálin skipti sköpum fyrir vefur þróun, PHP og HTML eru mismunandi á nokkra vegu.

Lykilmunurinn liggur í því til hvers tungumálin tvö eru notuð.

HTML er notað fyrir viðskiptavininn (eða framhlið) þróun, á meðan PHP er notað fyrir miðlarahlið þróun.

HTML er tungumálið sem forritarar nota til að skipuleggja efni á vefsíðu, svo sem að setja inn texta, myndir, töflur og tengla, forsníða texta og tilgreina liti.

Á sama tíma er PHP notað til að geyma og sækja gögn úr gagnagrunni, framkvæma rökréttar aðgerðir, senda og svara tölvupóstum, hlaða upp og hlaða niður skrám, þróa skrifborðsforrit og fleira.

Hvað varðar tegund kóða, HTML er kyrrstætt á meðan PHP er kraftmikið. HTML kóði er alltaf sá sami í hvert skipti sem hann er opnaður, en PHP niðurstöður eru mismunandi eftir vafra notandans.

Fyrir nýja forritara er auðvelt að læra bæði tungumálin, þó að námsferillinn sé styttri með HTML en PHP.

Ljúktu við PHP svindlblað

Ef þú ert byrjandi forritari sem vilt vera færari í PHP eða auka þekkingu þína á því, hér er PHP svindlari þú getur fljótt vísað til.

Þetta svindlblað samanstendur af PHP aðgerðum – sem eru flýtileiðir fyrir þá kóða sem eru mikið notaðir – sem eru innbyggðir í forskriftarmálið.

Sækja PHP svindlblað

Ultimate HTML, CSS og PHP svindlblaðið

Hvort sem þú ert vanur verktaki eða bara einhver að byrja að kóða, þá er frábært að hafa eitthvað sem þú getur alltaf snúið aftur til til viðmiðunar eða einfaldlega endurnært minni þitt.

Og sem gjöf til þróunaraðila sem flakka á milli HTML, CSS og PHP, hér er ULTIMATE svindlblað, heill með öllu sem þú þarft að vita og muna varðandi þessi þrjú kóðunarmál:

Sæktu samsett HTML, CSS og PHP svindlblað