HTML, CSS eta PHP: azken iruzurra orria

in Baliabideak eta tresnak

Gure edukia irakurleek onartzen dute. Gure esteketan klik egiten baduzu, baliteke komisio bat irabaztea. Nola berrikusten dugun.

📥 Deskargatu nire HTML, CSS eta PHP tranpa-orriak, hiru kodetze-lengoaia hauei buruz jakin eta gogoratu behar duzun guztiarekin osatu.

Kodetzearen arteak urteak behar izan ditzake guztiz menperatzeko etiketa, sintaxi eta programazio-lengoaietako beste elementu guztiak sarritan nahastuta.

Garatzaile esperientziadunek ere zeregin jakinetarako sintaxi zuzena ahazteko tranpan erori daitezke. Hori dela eta, ez da errealista berde gehiago espero web garatzaileak artea ezin hobeto jabetzeko.

Horregatik da HTML, CSS eta PHPrako tranpa-orriak oso erabilgarriak dira, praktikatzen duzun denbora kontuan hartu gabe. Komando eta sintaxi egokiak aurkitzeko gida azkar gisa balio du, benetako web garapenean zentratu ahal izateko.

Jarraian, bisualki makurtutako tranpa-orriak aurkituko dituzu freskatze bizkorren aurretik, zure kodeketa-lanetan laguntzeko. Laster-marka, gorde edo inprimatzeko ere egin dut zure erosotasunerako.

Zer da HTML?

HTML Hypertext Markup Language esan nahi du – web orri baten egitura eta bere edukia sortzeko erabiltzen den kodea.

Markatze-lengoaia hau edukia modu jakin batean agertzeko edo funtzionatzeko erabiltzen zuten elementu sorta batek osatzen du eta webgune bakoitzaren frontend-kodearen zati nagusia da.

HTML da web orrien egitura deskribatzeko hizkuntza... HTMLarekin, egileek orrien egitura deskribatzen dute marka erabiliz. Hizkuntzaren elementuek edukia etiketatzen dute, hala nola paragrafoa, zerrenda, taula eta abar. – W3.org-tik

Esate baterako, edukiaren atal desberdinak sartu edo bildu ditzakezu, non inguratzen duten etiketak hitz edo irudi bat beste orrialde baterako hiperesteka egin dezaketen. Hau ere erabil dezakezu hitzak letra etzanak jartzeko eta letra-tipoak handiagoak edo txikiagoak egiteko, besteak beste.

Gisa adierazi W3, HTML-k egiteko aukera ematen dizun beste gauza batzuk hauek dira:

  • Sareko dokumentuak argitaratzearekin goiburuak, testua, taulak, zerrendak, argazkiak, Etab.
  • Lineako informazioa botoi baten klik eginez bidez eskuratzea hipertestu estekak.
  • Diseinatzea inprimakiak urruneko zerbitzuekin transakzioak egiteko informazioa bilatu, erreserbak egin edo produktuak eskatu, beste funtzio batzuen artean.
  • Barne kalkulu-orriak, bideoklipak eta beste euskarri batzuk eta dagoeneko zure dokumentuetan dauden aplikazioak.

Beraz, lerroa egingo bazenu "Nire txakurra oso gozoa da" berez, paragrafo bat dela zehaztu dezakezu paragrafoen etiketetan sartuz (geroago honi buruz gehiago), itxura hau izango lukeena: Nire txakurra oso gozoa da

Zein da HTML eta HTML5 arteko aldea?

Izenak dioen bezala, HTML5 HTML estandarraren bosgarren bertsioa da. Bideoa eta audioa hizkuntzan integratzea onartzen du, eta horrek hirugarrenen pluginen eta elementuen beharra murrizten du.

Hona hemen HTML eta HTML5 arteko desberdintasun nagusiak:

HTML

  • Ez du audioa eta bideoa onartzen flash player-en laguntzarik gabe.
  • Cookieak erabiltzen ditu aldi baterako datuak gordetzeko.
  • Ez du onartzen JavaScipt arakatzailean exekutatzen.
  • Grafiko bektorialak egiteko aukera ematen du, besteak beste, VML, Silver-light eta Flash teknologia desberdinak erabiliz.
  • Ez ditu arrastatu eta jaregin efektuak onartzen.
  • Arakatzaile zahar guztiekin funtzionatzen du.
  • Mugikorretarako ez da hain egokia.
  • Doctype deklarazioa luzea eta konplikatua da.
  • Ez du nabigazioa eta goiburua bezalako elementurik, ezta karaktere multzoa, a bezalako atributuak eresync, eta ping.
  • Oso zaila da erabiltzaileen benetako GeoKokapena lortzea arakatzaile bat erabiliz.
  • Ezin da sintaxi okerra kudeatu.

HTML5

  • Audio eta bideo kontrolak onartzen ditu erabilerarekin eta etiketak.
  • SQL datu-baseak eta aplikazioen cachea erabiltzen ditu lineaz kanpoko datuak gordetzeko.
  • JavaScript atzeko planoan lan egiteko aukera ematen du JS Web worker APIa erabiliz.
  • Grafiko bektorialak HTML5-en oinarrizko zati bat dira, SVG eta mihisearen antzera.
  • Arrastatu eta jaregin efektuak ahalbidetzen ditu.
  • Formak marrazteko aukera eman.
  • Firefox, Mozilla, Chrome eta Safari bezalako arakatzaile berri guztiak onartzen ditu.
  • Mugikorrentzako errespetua.
  • Doctype deklarazioa erraza eta erraza da.
  • Elementu berriak ditu web-egituretarako nabigazioa, goiburua eta oina, besteak beste, eta karaktere multzoaren atributuak ere baditu.sync, eta ping.
  • Karaktereen kodeketa erraza eta erraza egiten du.
  • Erabiltzailearen GeoLocation jarraipena egiteko aukera ematen du JS GeoLocation APIa erabiliz.
  • Sintaxi okerrak maneiatzeko gai da.
 

Gainera, HTML5-tik aldatu edo kendu diren HTML elementu asko daude. Besteak beste:

  • – Hona aldatuta
  • – Hona aldatuta
  • – Hona aldatuta
  • – Kendua
  • – Kendua
  • – Kendua
  • - Ez dago etiketa berririk. CSS erabiltzen du.
  • - Ez dago etiketa berririk. CSS erabiltzen du.
  • - Ez dago etiketa berririk. CSS erabiltzen du.
  • - Ez dago etiketa berririk. CSS erabiltzen du.
  • - Ez dago etiketa berririk. CSS erabiltzen du.

Bitartean, HTML5-ek gehitu berri diren elementu batzuk ere biltzen ditu. Besteak beste:

 

HTML5 Adibideak (Code PlayGround)

Egitura Semantikoaren Adibideak

In HTML5 badaude elementu semantiko batzuk web orri baten zati desberdinak definitzeko erabil daitezkeenak. Hona hemen ohikoenak:

html5 egitura semantikoko elementuak
Iturria: w3schools.com
 

Goiburua

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

Nab

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

atala

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

Artikulu

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

Alde batera (alboko barra)

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

Oina

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

Oinarrizko testu-formatuaren adibideak

Izenburuak to

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

Paragrafoa ( & )

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

Ordenatu gabe eta zerrenda ordenatua

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

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

Blokeoa eta aipatu

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

Esteka

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

Botoia

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

Lerro-haustura

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

Lerro horizontala

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

Helbidea

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

Azpi-indizea eta goi-indizea

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

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

Laburdura

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

Kodea

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

Denbora

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

Ezabatu da

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

Taulen Adibideak

Mahai burua, gorputza eta oina adibidea

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

Taulen goiburuak, errenkadak eta datuen adibidea

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

Komunikabideen Adibideak

Irudia

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

Irudia

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

Irudia

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

Bideoa

<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 Cheat Orri osoa

Garatzaile ondua bazara edo industrian oinak bustitzea bilatzen ari den norbait, beti laguntzen du bat edukitzea. HTML formatua iruzurra orria erabilgarri. Eta urrats guztietan lagun zaitzakeen bat diseinatu dut.

html iruzur orria

 

Deskargatu HTML Cheat Fitxa

 

Zer da CSS?

Cascading estilo-orriak edo CSS HTML elementuak pantailan nola bistaratuko diren deskribatzen du. Hainbat orrialderen diseinuak aldi berean kontrola ditzakeenez, denbora eta esfortzu asko aurreztu ditzakezu.

CSS Web orrien aurkezpena deskribatzeko hizkuntza da, koloreak, diseinua eta letra-tipoak barne. Aurkezpena gailu mota desberdinetara egokitzeko aukera ematen du, hala nola, pantaila handietara, pantaila txikietara edo inprimagailuetara. – W3.org-tik

Zein da HTML eta CSS arteko aldea?

HTML eta CSS web-orriak eta aplikazioak sortzeko erabiltzen diren hizkuntzak badira ere, funtzio desberdinak dituzte.

HTMLa da web orrian bistaratuko den egitura eta edukia zehazteko erabiltzen duzuna.

CSS, berriz, aldatzeko erabiltzen da web diseinua Web-orriko HTML elementuen (diseinua, efektu bisualak eta atzeko planoko kolorea barne).

HTML-ek egitura eta edukia sortzen du, CSS-k diseinua edo estiloa. Elkarrekin, HTML eta CSS web-orriaren interfazea osatzen dute.

Zer da CSS sintaxia?

CSS sintaxia hautatzaile batek eta deklarazio bloke batek osatzen dute.

Hautatzaileak estiloa ezarriko den HTML elementua zehazten du deklarazio-blokeak CSS-ren deklarazio edo bikote bat edo gehiago dituen bitartean propietate-izen bat eta bi puntu bat dituen balio bat.

Adierazpenak puntu eta komaz bereizten dira eta deklarazio-blokeak beti giltza kizkurren artean sartzen dira.

Adibidez, zure 1. goiburuaren itxura aldatu nahi baduzu, zure CSS sintaxiak honelako itxura izango luke: h1 {color:red; letra-tamaina: 16pc;}

Osatu CSS Cheat Orria

CSS nahikoa erraza da erabiltzeko. Erronka da hautatzaile eta aldarrikapen asko daudela, guztiak gogoratzea zaila dela ezinezkoa ez bada. Ez dituzu buruz ikasi behar, ordea.

Hona hemen bat CSS eta CSS3 iruzur orria edonoiz erabil dezakezuna.

CSS Cheat Orria

 

Deskargatu CSS Cheat Fitxa

 

Zer da PHP?

PHP Hypertext Preprocessor-en akronimoa da, webgune dinamikoak, web aplikazioak edo webgune estatikoak garatzeko erabiltzen den HTML txertatutako kode irekiko script-lengoaia ezaguna.

Geroztik PHP zerbitzariaren aldeko hizkuntza bat da, bere script-ak zerbitzarian exekutatzen dira (ez arakatzailean), eta bere irteera HTML arrunta da arakatzailean.

PHP kode irekiko erabilera orokorreko script-lengoaia oso erabilia da, web garapenerako bereziki egokia dena eta HTML-n txerta daitekeena. – PHP.net-etik

Zerbitzariaren aldeko script-lengoaia hau hainbat sistema eragiletan exekutatzen da, Windows, Mac OS, Linux eta Unix barne. Gainera, Apache eta IIS bezalako zerbitzari gehienekin bateragarria da.

ASP eta JSP bezalako beste hizkuntzekin alderatuta, PHP erraza da ikasten hasiberrientzat. PHP-k maila aurreratuko garatzaileek behar dituzten funtzio ugari eskaintzen ditu.

Zein da PHP eta HTMLren arteko aldea?

Bi hizkuntzak funtsezkoak diren arren web garapena, PHP eta HTML desberdinak dira hainbat modutan.

Funtsezko aldea bi hizkuntzak zertarako erabiltzen diren datza.

HTML bezeroaren aldetik erabiltzen da (edo front-end) garapena, berriz PHP zerbitzariaren aldetik erabiltzen da garapena.

HTML garatzaileek webgune bateko edukia antolatzeko erabiltzen duten hizkuntza da, hala nola, testua, irudiak, taulak eta hiperestekak txertatzeko, testua formateatzeko eta koloreak zehazteko.

Bitartean, PHP erabiltzen da datu-base bateko datuak gordetzeko eta berreskuratzeko, eragiketa logikoak egiteko, mezu elektronikoak bidaltzeko eta erantzuteko, fitxategiak igo eta deskargatzeko, mahaigaineko aplikazioak garatzeko eta abar.

Kode motari dagokionez, HTML estatikoa da PHP dinamikoa den bitartean. HTML kodea beti berdina da irekitzen den bakoitzean, eta PHP emaitzak erabiltzailearen arakatzailearen arabera aldatzen dira.

Garatzaile berrientzat, bi hizkuntzak erraz ikasten dira, nahiz eta ikasketa kurba HTMLrekin PHP baino laburragoa den.

PHP Cheat Orri osoa

Programatzaile hasiberria bazara, PHPn trebeagoa izan nahi baduzu edo zure ezagutza zabaldu nahi baduzu, hona hemen PHP iruzur orria azkar aipatu dezakezu.

Cheat-orri honek PHP funtzioz osatuta dago - oso erabiliak diren kodeetarako lasterbideak dira - gidoi-lengoaian integratuta daudenak.

PHP Cheat Orria

 

Deskargatu PHP Cheat Fitxa

 

Azken HTML, CSS eta PHP Cheat Sheet

Garatzaile ondua izan edo kodetzen hasten den norbait izan, oso ona da beti erreferentzia bila itzul zaitezkeen zerbait izatea edo, besterik gabe, memoria freskatzeko.

Eta malabareak egiten dituzten garatzaileei opari gisa HTML, CSS eta PHP, hona hemen ULTIMATE iruzur orria, hiru kodetze-lengoaia hauei buruz jakin eta gogoratu behar duzun guztiarekin osatu:

 

Deskargatu HTML, CSS eta PHP Cheat Sheat Orria

 

Egilea buruz

Matt Ahlgren

Mathias Ahlgren zuzendari nagusia eta sortzailea da Website Rating, editore eta idazle talde global bat gidatzen. Informazioaren zientzietan eta kudeaketan masterra egin zuen. Bere karrera SEOra bideratu zen unibertsitatean web garapeneko esperientziaren ondoren. 15 urte baino gehiago ditu SEO, marketin digitalean eta web garapenean. Bere arreta webgunearen segurtasuna ere barne hartzen du, Zibersegurtasuneko ziurtagiri batek frogatuta. Espezializazio anitz honek bere lidergoa eusten du Website Rating.

WSR taldea

"WSR Team" teknologian, Interneteko segurtasunean, marketin digitalean eta web garapenean espezializatutako editore eta idazle adituen talde kolektiboa da. Eremu digitalaz zaletuta, ondo ikertutako edukiak, argigarriak eta eskuragarriak ekoizten dituzte. Zehaztasun eta argitasunarekiko konpromisoak egiten ditu Website Rating mundu digital dinamikoan informatuta egoteko baliabide fidagarria.

Egon informatuta! Sartu gure buletinera
Harpidetu orain eta lortu doako sarbidea harpidedunentzako soilik diren gidak, tresnak eta baliabideak.
Edonoiz kendu dezakezu harpidetza. Zure datuak seguru daude.
Egon informatuta! Sartu gure buletinera
Harpidetu orain eta lortu doako sarbidea harpidedunentzako soilik diren gidak, tresnak eta baliabideak.
Edonoiz kendu dezakezu harpidetza. Zure datuak seguru daude.
Partekatu...