ХТМЛ, ЦСС и ПХП: Ултимате Цхеат Схеет

in Ресурси и алати

Наш садржај је подржан за читање. Ако кликнете на наше везе, можда ћемо зарадити провизију. Како прегледамо.

📥 Преузмите мој ХТМЛ, ЦСС и ПХП варалице, заједно са свиме што треба да знате и запамтите у вези са ова три кодна језика.

Уметности кодирања могу бити потребне године да се потпуно савлада са свим ознакама, синтаксама и другим елементима програмских језика који се често преплићу.

Чак и искуснији програмери могу упасти у замку заборављања исправне синтаксе за одређене задатке. Као такво, нереално је очекивати више зеленог веб девелоперс да има беспрекорно схватање уметности.

То је разлог зашто цхеат схеетс за ХТМЛ, ЦСС и ПХП су изузетно корисни, без обзира колико дуго вежбате. Служи као брзи водич за проналажење правих команди и синтаксе, омогућавајући вам да се фокусирате на стварни веб развој.

Испод ћете пронаћи визуелно нагнуте варалице којима претходе брза освежавања која ће вам помоћи у вашим настојањима да кодирате. Такође сам направио да се лако обележава, чува или штампа ради ваше удобности.

Шта је ХТМЛ?

ХТМЛ је скраћеница од Хипертект Маркуп Лангуаге – код који се користи за креирање структуре веб странице и њеног садржаја.

Овај језик за означавање састоји се од низа елемената који се користе да би се садржај појавио или функционисао на одређени начин и главни је део фронт-енд кода сваке веб локације.

ХТМЛ је језик за описивање структуре веб страница... Са ХТМЛ-ом, аутори описују структуру страница користећи маркуп. Елементи језика означавају делове садржаја као што су пасус, листа, табела и тако даље. – са В3.орг

На пример, можете да приложите или умотате различите делове садржаја – где ознаке које обухватају могу да направе хипервезу речи или слике до друге странице. Такође можете да користите ово да бисте истицали речи у курзиву и повећали или смањили фонтове, између осталог.

Као што је наведено од стране W3, неке од других ствари које вам ХТМЛ дозвољавају укључују:

  • Објављивање онлајн докумената са наслови, текст, табеле, листе, фотографије, Итд
  • Преузимање информација на мрежи притиском на дугме преко хипертекстуалне везе.
  • Пројектовање облици за обављање трансакција са удаљеним сервисима до потражите информације, направите резервације или наручите производе, између осталих функција.
  • Укључујући табеле, видео клипови и други медији и апликације које су већ у вашим документима.

Дакле, ако би сте направили линију “Мој пас је веома сладак” самостално, можете одредити да је то пасус тако што ћете га затворити у ознаке параграфа (више о томе касније), који би изгледали овако: Мој пас је веома сладак

Која је разлика између ХТМЛ-а и ХТМЛ5?

Као што име каже, ХТМЛ5 је пета верзија ХТМЛ стандарда. Подржава интеграцију видео и аудио записа у језик, што смањује потребу за додацима и елементима трећих страна.

Испод су главне разлике између ХТМЛ-а и ХТМЛ5:

ХТМЛ-

  • Не подржава аудио и видео без подршке за флеш плејер.
  • Користи колачиће за чување привремених података.
  • Не дозвољава да се ЈаваСципт покрене у прегледачу.
  • Омогућава векторску графику коришћењем различитих технологија као што су ВМЛ, Силвер-лигхт и Фласх, између осталих.
  • Не дозвољава ефекте превлачења и испуштања.
  • Ради са свим старијим претраживачима.
  • Мање прилагођен мобилним уређајима.
  • Декларација типа документа је дуга и компликована.
  • Не садржи елементе као што су нав и заглавље, као ни атрибуте као што су цхарсет, аsync, и пинг.
  • Изузетно је тешко добити праву геолокацију корисника помоћу претраживача.
  • Не могу да обрадим нетачну синтаксу.

ХТМЛКСНУМКС

  • Подржава аудио и видео контроле уз употребу и ознаке.
  • Користи СКЛ базе података и кеш апликације за складиштење података ван мреже.
  • Омогућава ЈаваСцрипт-у да ради у позадини уз коришћење АПИ-ја за ЈС Веб радника.
  • Векторска графика је основни део ХТМЛ5, слично као СВГ и платно.
  • Омогућава ефекте превлачења и испуштања.
  • Омогућите цртање облика.
  • Подржава све нове претраживаче као што су Фирефок, Мозилла, Цхроме и Сафари.
  • Више прилагођен мобилним уређајима.
  • Декларација типа документа је једноставна и лака.
  • Има нове елементе за веб структуре као што су навигација, заглавље и подножје, између осталог, а такође има атрибуте скупа знакова, аsync, и пинг.
  • Чини кодирање знакова једноставним и лаким.
  • Омогућава праћење ГеоЛоцатион корисника помоћу ЈС ГеоЛоцатион АПИ-ја.
  • Способан за руковање нетачном синтаксом.
 

Поред тога, постоји много елемената ХТМЛ-а који су или измењени или уклоњени из ХТМЛ5. Ови укључују:

  • - Промењено у
  • - Промењено у
  • - Промењено у
  • – Уклоњено
  • – Уклоњено
  • – Уклоњено
  • – Нема нове ознаке. Користи ЦСС.
  • – Нема нове ознаке. Користи ЦСС.
  • – Нема нове ознаке. Користи ЦСС.
  • – Нема нове ознаке. Користи ЦСС.
  • – Нема нове ознаке. Користи ЦСС.

У међувремену, ХТМЛ5 такође укључује низ новододатих елемената. Ови укључују:

 

ХТМЛ5 примери (Цоде ПлаиГроунд)

Примери семантичке структуре

In ХТМЛКСНУМКС постоје неки семантички елементи који се могу користити за дефинисање различитих делова веб странице. Ево најчешћих:

 

Хеадер

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

Основни примери обликовања текста

Наслови до

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

Примери табела

Пример главе, тела и стопала

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

Примери медија

Слика

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

Комплетан ХТМЛ Цхеат Схеет

Било да сте искусан програмер или неко ко само жели да покваси ноге у индустрији, увек помаже имати ХТМЛ форматирање цхеат схеет згодно. И осмислио сам један који би вам могао помоћи на сваком кораку.

хтмл цхеат схеет

 

Преузмите ХТМЛ Цхеат Схеет

 

Шта је ЦСС?

Каскадни листови стилова или ЦСС описује како ће ХТМЛ елементи бити приказани на екрану. Пошто може да контролише распоред више страница истовремено, може вам уштедети много времена и труда.

ЦСС је језик за описивање презентације веб страница, укључујући боје, изглед и фонтове. Омогућава прилагођавање презентације различитим типовима уређаја, као што су велики екрани, мали екрани или штампачи. – са В3.орг

Која је разлика између ХТМЛ-а и ЦСС-а?

Иако су ХТМЛ и ЦСС језици који се користе за прављење веб страница и апликација, они имају различите функције.

ХТМЛ је оно што користите да диктирате структуру и садржај који ће бити приказан на веб страници.

ЦСС се, с друге стране, користи за модификацију веб дизајн ХТМЛ елемената на веб страници (укључујући изглед, визуелне ефекте и боју позадине).

ХТМЛ креира структуру и садржај, ЦСС ради дизајн или стил. Заједно, ХТМЛ и ЦСС чине интерфејс веб странице.

Шта је ЦСС синтакса?

ЦСС синтакса састоји се од селектора и блока декларације.

Селектор одређује ХТМЛ елемент који треба да буде стилизован док блок декларације садржи једну или више декларација или парова ЦСС-а, име својства и вредност са двотачком између њих.

Декларације су одвојене тачком и зарезом, а блокови декларација су увек затворени у витичастим заградама.

На пример, ако желите да измените начин на који ваш наслов 1 изгледа, ваша ЦСС синтакса би изгледала отприлике овако: х1 {цолор:ред; фонт-сизе:16пц;}

Комплетан ЦСС Цхеат Схеет

ЦСС је довољно једноставан за коришћење. Изазов је у томе што има много селектора и изјава да је запамтити све њих тешко ако не и немогуће. Ипак, не морате их памтити.

Ево цхеат схеет за ЦСС и ЦСС3 које можете користити било када.

ЦСС Цхеат Схеет

 

Преузмите ЦСС Цхеат Схеет

 

Шта је ПХП?

ПХП је акроним за Хипертект Препроцессор, популаран опен-соурце, у ХТМЛ уграђен скриптни језик који се користи за развој динамичких веб локација, веб апликација или статичких веб локација.

Од ПХП је језик на страни сервера, његове скрипте се извршавају на серверу (не у претраживачу), а његов излаз је обичан ХТМЛ у претраживачу.

ПХП је широко распрострањен опен соурце језик за скриптовање опште намене који је посебно погодан за веб развој и може се уградити у ХТМЛ. – са ПХП.нет

Овај скриптни језик на страни сервера ради на различитим оперативним системима, укључујући Виндовс, Мац ОС, Линук и Уник. Такође је компатибилан са већином сервера као што су Апацхе и ИИС.

У поређењу са другим језицима као што су АСП и ЈСП, ПХП је лак за учење за почетнике. ПХП такође нуди мноштво функција које су потребне програмерима напредног нивоа.

Која је разлика између ПХП-а и ХТМЛ-а?

Иако су оба језика пресудна за веб девелопмент, ПХП и ХТМЛ се разликују на неколико начина.

Кључна разлика лежи у томе за шта се користе ова два језика.

ХТМЛ се користи на страни клијента (или фронт-енд) развој, док ПХП се користи на страни сервера развој.

ХТМЛ је језик који програмери користе за организовање садржаја на веб локацији, као што је уметање текста, слика, табела и хипервеза, форматирање текста и одређивање боја.

У међувремену, ПХП се користи за складиштење и преузимање података из базе података, извођење логичких операција, слање и одговарање на е-пошту, отпремање и преузимање датотека, развој десктоп апликација и још много тога.

Што се тиче типа кода, ХТМЛ је статичан док је ПХП динамичан. ХТМЛ код је увек исти сваки пут када се отвори, док ПХП резултати варирају у зависности од претраживача корисника.

За нове програмере, оба језика су лака за учење, иако је крива учења краћа код ХТМЛ-а него код ПХП-а.

Комплетан ПХП Цхеат Схеет

Ако сте програмер почетник који жели да буде вештији у ПХП-у или да прошири своје знање о њему, ево ПХП цхеат схеет можете брзо да се позовете.

Ова варалица се састоји од ПХП функција – које су пречице за широко коришћене кодове – које су уграђене у језик скриптова.

ПХП Цхеат Схеет

 

Преузмите ПХП Цхеат Схеет

 

Ултимате ХТМЛ, ЦСС и ПХП Цхеат Схеет

Било да сте искусан програмер или само неко ко почиње са кодирањем, сјајно је имати нешто чему се увек можете вратити за референцу или једноставно освежити памћење.

И као поклон програмерима који жонглирају између ХТМЛ, ЦСС и ПХП, ево УЛТИМАТЕ цхеат схеет-а, заједно са свиме што треба да знате и запамтите у вези са ова три кодна језика:

 

Преузмите комбиновани ХТМЛ, ЦСС и ПХП Цхеат Схеет

 

Учешће у...