HTML, CSS ja PHP: ülim petuleht

in Ressursid ja tööriistad

Meie sisu on lugejatoega. Kui klõpsate meie linkidel, võime teenida komisjonitasu. Kuidas me üle vaatame.

📥 Laadige alla minu HTML, CSS ja PHP petulehed, mis sisaldab kõike, mida peate nende kolme kodeerimiskeele kohta teadma ja meeles pidama.

Kodeerimiskunsti täielikuks omandamiseks võib kuluda aastaid, kuna kõik sildid, süntaksid ja muud programmeerimiskeelte elemendid on sageli läbi põimunud.

Isegi kogenumad arendajad võivad sattuda lõksu, unustades konkreetsete ülesannete õige süntaksi. Sellisena on ebareaalne oodata rohkem rohelist veebiarendajad kunstist veatult aru saama.

See on põhjus, miks petulehed HTML-i, CSS-i ja PHP jaoks on äärmiselt kasulikud, olenemata sellest, kui kaua olete harjutanud. See toimib kiire juhendina õigete käskude ja süntaksite leidmiseks, võimaldades teil keskenduda tegelikule veebiarendusele.

Altpoolt leiate visuaalselt kalduvad petulehed, millele eelnevad kiired värskendused, mis aitavad teil kodeerimispüüdlusi teha. Olen teinud selle ka teie mugavuse huvides hõlpsasti järjehoidjatesse lisamiseks, salvestamiseks või printimiseks.

Mis on HTML?

HTML tähistab hüperteksti märgistuskeelt – kood, mida kasutatakse veebilehe ja selle sisu struktuuri loomiseks.

See märgistuskeel koosneb reast elementidest, mida kasutati sisu teatud viisil kuvamiseks või toimimiseks, ja see on iga veebisaidi esiotsa koodi põhiosa.

HTML on keel veebilehtede struktuuri kirjeldamiseks … HTML-iga kirjeldavad autorid lehtede struktuuri märgistuse abil. Keeleelemendid märgistavad sisutükke, nagu lõik, loend, tabel jne. – saidilt W3.org

Näiteks saate lisada või mähkida erinevaid sisu osi – kus ümbritsevad sildid võivad luua sõna või pildi hüperlingi teisele lehele. Samuti saate seda kasutada muu hulgas sõnade kaldkirjas muutmiseks ja fontide suurendamiseks või vähendamiseks.

Nagu märkis W3, on mõned muud asjad, mida HTML võimaldab teha, on järgmised:

  • Internetis dokumentide avaldamine rakendusega pealkirjad, tekst, tabelid, loendid, fotodJne
  • Veebipõhise teabe hankimine ühe nupuvajutusega kaudu hüperteksti lingid.
  • Projekteerimine vormid kaugteenustega tehingute tegemiseks otsige teavet, tehke broneeringuid või tellige tooteid, muude funktsioonide hulgas.
  • Kaasa arvatud arvutustabeleid, videoklippe ja muud meediat ja juba teie dokumentides olevad rakendused.

Nii et kui sa peaksid joone tegema “Minu koer on väga armas” iseseisvalt seisma, saate määrata, et see on lõik, lisades selle lõigumärgenditesse (sellest lähemalt hiljem), mis näeb välja järgmine: Minu koer on väga armas

Mis vahe on HTML-il ja HTML5-l?

Nagu nimigi ütleb, HTML5 on HTML-i standardi viies versioon. See toetab video ja heli integreerimist keelde, mis vähendab vajadust kolmandate osapoolte pistikprogrammide ja elementide järele.

Allpool on toodud peamised erinevused HTML-i ja HTML5 vahel.

HTML

  • Ei toeta heli ja videot ilma flash-mängija toeta.
  • Kasutab küpsiseid ajutiste andmete salvestamiseks.
  • Ei luba JavaSciptil brauseris töötada.
  • Võimaldab vektorgraafikat, kasutades muu hulgas erinevaid tehnoloogiaid, nagu VML, Silver-light ja Flash.
  • Ei luba pukseerimisefekte.
  • Töötab kõigi vanemate brauseritega.
  • Vähem mobiilisõbralik.
  • Doctype deklaratsioon on pikk ja keeruline.
  • Sellel pole selliseid elemente nagu nav ja päis, samuti atribuute nagu charset, asyncja ping.
  • Äärmiselt raske saada brauseri abil kasutajate tõelist geograafilist asukohta.
  • Ei saa hakkama ebatäpse süntaksiga.

HTML5

  • Toetab heli- ja videojuhtimisseadmeid kasutades ja sildid.
  • Kasutab võrguühenduseta andmete salvestamiseks SQL-andmebaase ja rakenduste vahemälu.
  • Võimaldab JavaScriptil töötada taustal JS Web Worker API abil.
  • Vektorgraafika on HTML5 põhiosa, nagu SVG ja lõuend.
  • Võimaldab pukseerimise efekte.
  • Võimaldab joonistada kujundeid.
  • Toetab kõiki uusi brausereid, nagu Firefox, Mozilla, Chrome ja Safari.
  • Mobiilisõbralikum.
  • Doctype deklaratsioon on lihtne ja lihtne.
  • Sisaldab uusi elemente veebistruktuuride jaoks, nagu navigeerimine, päis ja jalus, ning sellel on ka tähestiku atribuudid,syncja ping.
  • Muudab märkide kodeerimise lihtsaks ja lihtsaks.
  • Võimaldab kasutaja geograafilise asukoha jälgimist JS GeoLocation API abil.
  • Võimeline käsitlema ebatäpset süntaksit.
 

Lisaks on palju HTML-i elemente, mida on HTML5-st muudetud või eemaldatud. Need sisaldavad:

  • – muudetud
  • – muudetud
  • – muudetud
  • - Eemaldatud
  • - Eemaldatud
  • - Eemaldatud
  • – Uut silti pole. Kasutab CSS-i.
  • – Uut silti pole. Kasutab CSS-i.
  • – Uut silti pole. Kasutab CSS-i.
  • – Uut silti pole. Kasutab CSS-i.
  • – Uut silti pole. Kasutab CSS-i.

Samal ajal sisaldab HTML5 ka mitmeid äsja lisatud elemente. Need sisaldavad:

 

HTML5 näited (Code PlayGround)

Semantilise struktuuri näited

In HTML5 on mõningaid semantilisi elemente, mida saab kasutada veebilehe erinevate osade määratlemiseks. Siin on kõige levinumad:

html5 semantilise struktuuri elemendid
Allikas: w3schools.com
 

Päis

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

jaotis

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

Artikkel

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

Kõrvale (külgriba)

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

Jalus

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

Põhilised tekstivormingu näited

Pealkirjad juurde

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

Lõik ( & )

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

Tellimata ja tellitud nimekiri

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

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

Plokktsitaat ja tsiteerida

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

Nupp

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

Reavahetus

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

Horisontaalne joon

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

Aadress

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

Alam- ja ülaindeks

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

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

Lühend

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

Kood

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

Aeg

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

Kustutatud

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

Tabelinäited

Lauapea, keha ja jala näide

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

Tabeli pealkirjad, read ja andmete näide

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

Meedia näited

Pilt

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

Pilt

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

Joonis

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

Täielik HTML-petuleht

Olenemata sellest, kas olete kogenud arendaja või keegi, kes lihtsalt soovib selles valdkonnas jalgu lasta, aitab alati HTML-vormingus petuleht käepärane. Ja ma olen välja töötanud sellise, mis võib teid igal sammul aidata.

html petuleht

 

Laadige alla HTML-petuleht

 

Mis on CSS?

Kaskaadlaaditabelid või CSS kirjeldab, kuidas HTML-i elemente ekraanil kuvatakse. Kuna see suudab korraga juhtida mitme lehe paigutust, võib see säästa palju aega ja vaeva.

CSS on keel, mis kirjeldab veebilehtede esitusviisi, sealhulgas värve, paigutust ja fonte. See võimaldab kohandada esitlust erinevat tüüpi seadmetega, nagu suured ekraanid, väikesed ekraanid või printerid. – saidilt W3.org

Mis vahe on HTML-il ja CSS-il?

Kuigi HTML ja CSS on mõlemad keeled, mida kasutatakse veebilehtede ja rakenduste koostamiseks, on neil erinevad funktsioonid.

HTML on see, mida kasutate veebilehel kuvatava struktuuri ja sisu dikteerimiseks.

Teisest küljest kasutatakse CSS-i muutmiseks web design HTML-i elementidest veebilehel (sh paigutus, visuaalsed efektid ja taustavärv).

HTML loob struktuuri ja sisu, CSS teeb kujunduse või stiili. HTML ja CSS moodustavad koos veebilehe liidese.

Mis on CSS-i süntaks?

CSS-i süntaks koosneb selektorist ja deklaratsiooniplokist.

Selektor määrab stiilitava HTML-elemendi, samas kui deklaratsiooniplokk sisaldab ühte või mitut deklaratsiooni või CSS-i paari, atribuudi nime ja väärtust, mille vahel on koolon.

Deklaratsioonid eraldatakse semikoolonitega ja deklaratsiooniplokid on alati suletud sulgudes.

Näiteks kui soovite muuta oma pealkirja 1 väljanägemist, näeb teie CSS-i süntaks välja umbes selline: h1 {color:red; fondi suurus: 16 tk;}

Täitke CSS-petuleht

CSS-i on piisavalt lihtne kasutada. Väljakutse seisneb selles, et on palju valijaid ja deklaratsioone, et nende kõigi meelespidamine on raske kui mitte võimatu. Siiski ei pea te neid pähe õppima.

Siin on a petuleht CSS-i ja CSS3 jaoks mida saate igal ajal kasutada.

CSS-petuleht

 

Laadige alla CSS-petuleht

 

Mis on PHP?

PHP on akronüüm sõnast Hypertext Preprocessor, populaarne avatud lähtekoodiga HTML-i manustatud skriptikeel, mida kasutatakse dünaamiliste veebisaitide, veebirakenduste või staatiliste veebisaitide arendamiseks.

Alates PHP on serveripoolne keel, käivitatakse selle skriptid serveris (mitte brauseris) ja selle väljund on brauseris tavaline HTML.

PHP on laialdaselt kasutatav avatud lähtekoodiga üldotstarbeline skriptikeel, mis sobib eriti hästi veebiarenduseks ja mida saab manustada HTML-i. – saidilt PHP.net

See serveripoolne skriptikeel töötab mitmesugustes operatsioonisüsteemides, sealhulgas Windowsis, Mac OS-is, Linuxis ja Unixis. See ühildub ka enamiku serveritega, nagu Apache ja IIS.

Võrreldes teiste keeltega, nagu ASP ja JSP, on PHP algajatele lihtne õppida. PHP pakub ka palju funktsioone, mida edasijõudnud arendajad vajavad.

Mis vahe on PHP-l ja HTML-il?

Kuigi mõlemad keeled on selle jaoks üliolulised veebiarendust, PHP ja HTML erinevad mitmel viisil.

Peamine erinevus seisneb selles, milleks neid kahte keelt kasutatakse.

HTML-i kasutatakse kliendi poolel (või esiotsa) arendus, samas PHP-d kasutatakse serveri poolel arengut.

HTML on keel, mida arendajad kasutavad veebisaidi sisu korraldamiseks, näiteks teksti, piltide, tabelite ja hüperlinkide sisestamiseks, teksti vormindamiseks ja värvide määramiseks.

Vahepeal kasutatakse PHP-d andmete salvestamiseks ja väljavõtmiseks andmebaasist, loogiliste toimingute tegemiseks, e-kirjade saatmiseks ja neile vastamiseks, failide üles- ja allalaadimiseks, töölauarakenduste arendamiseks ja muuks.

Kooditüübi osas HTML on staatiline, PHP aga dünaamiline. HTML-kood on alati sama, kui see avatakse, samas kui PHP tulemused sõltuvad kasutaja brauserist.

Uutele arendajatele on mõlemat keelt lihtne õppida, kuigi õppimiskõver on HTML-i puhul lühem kui PHP-ga.

Täitke PHP petuleht

Kui olete algaja programmeerija, kes soovib PHP-s paremini tunda või oma teadmisi selle kohta laiendada, on siin PHP petuleht saate kiiresti viidata.

See petuleht koosneb PHP-funktsioonidest – mis on laialdaselt kasutatavate koodide otseteed –, mis on skriptikeelde sisse ehitatud.

PHP petuleht

 

Laadige alla PHP Cheat Sheet

 

Ultimate HTML-i, CSS-i ja PHP-petuleht

Olenemata sellest, kas olete kogenud arendaja või alles kodeerimisega alustav inimene, on suurepärane, kui teil on midagi, mille juurde saate alati tagasi pöörduda või lihtsalt oma mälu värskendada.

Ja kingituseks arendajatele, kes vahel žongleerivad HTML, CSS ja PHP, siin on ülim petuleht, koos kõigega, mida peate nende kolme kodeerimiskeele kohta teadma ja meeles pidama:

 

Laadige alla kombineeritud HTML-i, CSS-i ja PHP-petuleht

 

Teave Autor:

Matt Ahlgren

Mathias Ahlgren on ettevõtte tegevjuht ja asutaja Website Rating, mis juhib ülemaailmset toimetajate ja kirjanike meeskonda. Tal on infoteaduse ja juhtimise magistrikraad. Tema karjäär pöördus SEO poole pärast varajast veebiarenduse kogemust ülikooli ajal. Üle 15 aasta SEO, digitaalse turunduse ja veebiarendajate alal. Tema fookuses on ka veebisaitide turvalisus, mida tõendab küberturvalisuse sertifikaat. Need mitmekesised teadmised on tema juhtimise aluseks Website Rating.

WSR meeskond

"WSR Team" on asjatundlike toimetajate ja kirjanike rühm, kes on spetsialiseerunud tehnoloogiale, Interneti-turvalisusele, digitaalsele turundusele ja veebiarendusele. Olles kirglik digitaalvaldkonna vastu, toodavad nad põhjalikult uuritud, sisukat ja juurdepääsetavat sisu. Nende pühendumus täpsusele ja selgusele teeb Website Rating usaldusväärne ressurss dünaamilises digitaalmaailmas kursis hoidmiseks.

Olge kursis! Liituge meie uudiskirjaga
Tellige kohe ja saate tasuta juurdepääsu ainult tellijatele mõeldud juhenditele, tööriistadele ja ressurssidele.
Saate tellimusest igal ajal loobuda. Teie andmed on turvalised.
Olge kursis! Liituge meie uudiskirjaga
Tellige kohe ja saate tasuta juurdepääsu ainult tellijatele mõeldud juhenditele, tööriistadele ja ressurssidele.
Saate tellimusest igal ajal loobuda. Teie andmed on turvalised.
Jaga...