Dobrý deň, priatelia! Tí z vás, ktorí čítali môj blog viac ako raz, vedia, čo som už mnohokrát povedal: na používanie internetu nepotrebujete špeciálne zručnosti v programovaní.

Takže z mojich slov nie som presvedčený, okrem toho, že existujú špeciálne služby. Ak ich nepoužívate, potom na vytvorenie webového zdroja a jeho pokračovanie je potrebné použiť jazykové programovanie.

Chcete vedieť, čo potrebujete na vytvorenie webovej stránky? Prečítajte si aj vy!

Základné ustanovenia

Ak chcete začať s vývojom webovej stránky, musíte zadať niekoľko slov. Nedá sa však povedať, ktorý z nich je lepší alebo horší alebo horší ako ten druhý. Nadradenosť nad ostatnými sa môže prejaviť len vtedy, keď je spevácka úloha vysoká.

Výber jedného alebo druhého bude úplne závisieť od úrovne ovládania programu a je zriedkavé nájsť fahivtsa, ktorý pozná všetky jazyky.

V prvom rade chcem povedať, že moje programovanie je základná syntax, ktorá vám umožňuje vytvoriť webový zdroj.

Základom úplne každého webu je. Táto syntax je v súlade s rozložením hypertextu. Všetci čitatelia webu to musia poznať, rovnako ako tabuľku násobenia.

V tom prípade ako keby ste boli vikoristi pripravený na rozhodnutie, Základné znalosti sú jednoducho potrebné. Celý proces vytvárania internetového zdroja a jeho obsahu sa vykonáva pomocou dodatočného html kódu. Ale zastosovuyuchi jogo, môžete vytvoriť len jednoduchú webovú stránku bez volanie zvona s korešpondenciou, ktorá poskytuje informácie len pre povedomie. Pre dobrý dynamický zdroj to nestačí!

Základné jazykové programovanie

V prvom rade je JavaScript základom všetkého programovania, ktoré potrebujete vedieť pri vytváraní webového zdroja. Medzi základné softvérové ​​platformy є Silver Light і Adobe Flash. Zvyšné rozšírenia navyše weboví vývojári dlho zneužívali.

Citáty sú vikoriyutsya pri vytváraní interaktívnych stránok. Predpovede Silver Light čoskoro nahradí Adobe Flash. V zriedkavých prípadoch sú dva softvérové ​​produktyÚplne postačí vytvorenie internetovej stránky, ale nie je potrebné meniť len jednu z nich.

Vyberte správnu syntax a ponechajte ju operačný systém, Takto sa chová zbojník. Na vytvorenie webového zdroja v operačnom systéme Windows sa často používa technológia vyvinutá spoločnosťou Microsoft - ASP.NET. Umožňuje vám vytvoriť absolútne akýkoľvek webový zdroj, najjednoduchší aj najzložitejší, pomocou množstva dopytov. Ak chcete urýchliť ASP.NET, znalosti nie sú na rovnakej úrovni ako Koristuvach, ale sú o niečo hlbšie.

Najpopulárnejšia syntax používaná programátormi je PHP. Má veľa výhod, vrátane rýchleho kódu a jednoduchej syntaxe. Od dnešného dňa je ľavá časť motorov napísaná v PHP.

Keď začínate rozumieť programovaniu webu, tí, ktorí si vyberú Javu, sú najinteligentnejší a ľahko sa učia. Na vytvorenie obsahu použite Java Server Pages.

IN Zvyšok času Ruby sa stala veľmi častým vikoristom. Navyše jeho popularita každým dňom rastie. Hlavne som sa s tým ešte nezaťažoval, ale vzhľadom na túto tému som vedel, že na moju adresu je veľa skrytých komentárov. Odborníci vidia Ruby ako najvhodnejšiu syntax pre rýchlu tvorbu webových stránok, v ktorých umožňuje implementáciu potrebnej funkcionality zdroja.

vrecká

Je potrebné vybrať vhodnú syntax na základe množstva parametrov, vrátane:

  • Typ operačného systému;
  • Skladanie a dynamika zloženého miesta;
  • Vedomosti odhalené v arzenáli tých, ktorí sú pri moci.

Zistil som, aké programovanie môžete potrebovať pri vytváraní webového zdroja a okamžite ich všetky použite, inak zvýhodníte ten jediný – ten váš vpravo.

Verím, že tento materiál bude pre vás užitočný a že tento článok budete radi zdieľať so svojimi priateľmi sociálne opatrenia. Nezabudnite sa prihlásiť na odber najnovšieho blogu. Do skorého videnia!

Ďakujem! Abdullin Ruslan

Na implementáciu funkcií rôznych priamostí webové programy „píšu“ stránky, vikoryst a ďalšie typy Webové rozloženia filmov Ide o maximalizáciu interaktívnych možností webového zdroja. Nebudeme sa ponoriť príliš hlboko do hrubej webovej terminológie, okrem toho, aby sme vám pomohli pochopiť základné aspekty písania kódu lokality, ktoré sa môžu objaviť počas procesu vyjednávania projektu a jeho následnej implementácie.

HTML

HTML- Toto je jedno z najstarších webových programovaní, ktoré sa objavilo na úsvite rozvoja internetu a etablovalo sa ako jedna z najjednoduchších a najspoľahlivejších metód webového programovania. HTML je skratka pre Hyper Text Markup Language – jazyk pre hypertextové značky. Stránky vytvorené pomocou technológie HTML majú väčšinou sadu statických stránok, ktoré nevyžadujú explicitnú databázu.

Technológia HTML sa dá použiť na vytváranie malých, odľahčených stránok do niekoľkých stránok, ktorých funkčnosť nevyžaduje interaktivitu a dynamiku.

Štandard HTML ako technológia nie je na mieste a dnes do prostredia webového dizajnu vstupuje nový štandard s názvom HTML5. Daná technológia je veľmi mladý, no ponúka veľký potenciál z hľadiska tvorby webových stránok a umožňuje implementovať nové, predtým nemožné, funkcionality. Aj keď technológia HTML5 ešte úplne nevstúpila do sféry vývoja webových aplikácií a ešte ju nepodporujú všetky internetové prehliadače, programy webových štúdií podporujú infúziu HTML5 na ďalší vývoj Internetové technológie v budúcnosti a webové stránky vytvárame pomocou najprogresívnejších technológií programovania webu.

PHP

PHP Moje programovanie na strane servera vytvára spojenia medzi webom a serverom a jeho databázou. Samotné PHP stránky nenaznačuje, že stránka je vytvorená, a ak sa pozriete na kód na strane takéhoto zdroja, uvidíte rovnaké HTML, len preložené kódom PHP.

Na stránkach na PHP je časť kódu napísaná v HTML zodpovedná za vzhľad a čerstvosť informácií a PHP zasa za dynamiku a interaktivitu funkcionality. Vďaka svojej jednoduchosti, flexibilite a plynulosti operácií je PHP jedným z najpopulárnejších štandardov vo vývoji webových aplikácií.

Pri vývoji dôležitej časti stránok vytvorených webovým štúdiom bola použitá technológia PHP, čo znamená, že stránka je prepojená s databázou, pomocou špeciálneho PHP kódu, s neviditeľnou mysľou, pričom sa vytvárajú dynamické, bohato funkčné rozhrania bez zdrojov .

BLESK

V podstate samotná technológia spláchnuť Toto nie je môj webový program, ale slúži na vizualizáciu prvkov napísaných v jazyku XML.

Vytvorenie webovej stránky pomocou technológie flash je zložitý a pracovne náročný proces a je výsledkom úsilia vynaloženého na nové úsilie a talenty. Flash prvky vám umožňujú urobiť vašu stránku farebnou a interaktívnou. Živé dynamické stránky zbavia váš zdroj neochvejnej pozornosti obchodníkov a pozitívny obraz vašej stránky sa navždy stratí v mysliach očarených korešpondentov. Imidž spoločnosti je založený na použití technológie flash na jej zdroji, ale to má len úžitok, pretože prvky vyrobené na flash nie sú lacné a sú považované za luxus.

No v tomto prípade sa treba takto pohybovať, poznať svet a za to nemôže tvorba flash stránok. Flash bloky sú oveľa dôležitejšie ako štandardné webové prvky, a preto sa načítavajú viac ako hodinu. A ako pravidlo, koristuvachs nemajú radi kontroly. Zverte preto vytvorenie svojej flashovej stránky profesionálom, ktorí ju optimalizujú pre maximálnu produktivitu.

WAP

WAP (Bezdrôtový aplikačný protokol) - táto technológia vám umožňuje prístup k internetovým zdrojom priamo z vášho mobilného zariadenia.

Hlavná dôležitosť stránky WAP ako zdroja internetu spočíva v tom, že stránka WAP je „uväznená“, aby ju bolo možné prezerať na malých displejoch telefónov a komunikátorov, a preto je stránka WAP pred vývojom prezentovaná so štandardom ів, ktorý vám umožní stránky jednoduchšie na portáli WAP a optimalizovať samotnú stránku pri jej prezeraní vo WAP prehliadači na telefóne.

Stránky, ktoré používajú WAP a vytvárajú svoje vlastné jazykové označenia, sú prispôsobené na výmenu informácií s prehliadačom WAP. A keďže pôvodný web je určený na prezeranie z počítača, väčšina z neho je napísaná v jazyku html, php, Perl, alebo xml, Potom sa štandard WML používa na vytváranie stránok WAP ( Bezdrôtový značkovací jazyk). Okrem toho pri vývoji zdrojov WAP používa vikorist svoj vlastný obrazový formát - WBMP, vďaka čomu je stránka WAP čo najľahšia.

V súvislosti s neustále rastúcim trhom mobilných zariadení sa na celom svete vyvíjajú štandardy prenosu dát mobilné zariadenia Preto sa tvorcovia webu neriadia inováciami na tomto webe a vo vývoji WAP stránok a vždy využívajú najprogresívnejšie metódy a pokročilé technológie.

A.S.P.

A.S.P. (Active Server Pages) - toto odhalí jadro vývoja webových doplnkov, ktoré vám umožňujú kombinovať HTML, skripty a komponenty servera ActiveX a vytvárať dynamické a výkonné webové riešenia pre podnikanie. Stránky ASP sú stránky, ktoré obsahujú skripty, ktoré sú zostavené na strane servera.

Perl

Perl (Praktická extrakcia a jazyk správ) - univerzálne, interpretované webové programovanie, ktoré sa používa na písanie cgi-skriptov a cgi-programov, ktoré sú kompilované na strane servera a umožňujú automatizáciu stránky. Perl je jedným z najjednoduchších a najkomplexnejších prostredí na vytváranie dynamických webových stránok, pretože sa neustále vyvíja s novými internetovými technológiami. Formát Perl je vynikajúci spôsob interakcie s webovými servermi prostredníctvom CGI ( pokročilé interakčné rozhranie). V súčasnosti sa Perl posúva k svojmu funkčnému náprotivku – PHP.

C+

C, C++- široko rozšírený webový programovací jazyk, ktorý sa používa na písanie CGI skriptov. V súčasnosti je podporovaných viac serverov. Skripty napísané v C+ musia byť skompilované na strane servera.

SSI

SSI (Zahrnúť na strane servera) - technológia umožňuje vybrať webovú stránku z niekoľkých skriptov alebo súborov jediným funkčným spôsobom. SSI vám umožňuje zahrnúť do webovej stránky informácie o serveri, ktoré nie sú dostupné prostredníctvom HTML. V podstate je SSI akýmsi analógom zahrnutia v PHP. Umožňuje vkladať prvky pre vzhľad do kódu lokality alebo skupiny prvkov, ktoré umožňujú upravovať vzhľad prostredníctvom jedného súboru. Direktívy SSI sú podporované .shtml, .htmі .html a sú registrované v súbore .htaccess.

Vytváranie webových stránok je zložitý proces, rozdelený do mnohých etáp. V prvej fáze navrhnite stránku grafický vzhľad: Takzvané náčrty alebo prototypy stránky. V skutočnosti to vyzerá ako zhluk farebných obrázkov pripravovanej stránky, v potvrdenie ktorých poslanec dúfa.

Náčrty alebo prototypy webových stránok sa často vytvárajú v programoch grafického dizajnu. Medzi profesionálnymi programami existujú tri najväčšie šírky - táto, Adobe Illustrator, і CorelDRAW. A, samozrejme, existuje množstvo ďalších menších odborných programov, ktoré nie sú o nič menej hodnotné, ale zatiaľ sa na ne nezameriavame.

Útočná fáza- je zdĺhavé vykonávať nízke číselné opravy a tieto náčrty samy spevniť zástupcom.

Čo sa týka dizajnu výtvorov stránky, opráv a schválenia manažérom, teraz je potrebné urobiť veľa prieskumu, ale čo rozloženie?

Ešte jedna etapa na vytvorenom webe: rozloženie.
Rozloženie- vytvorenie webovej stránky na základe náčrtu alebo prototypu stránky. A to znamená, že všetky tie veci, ktoré dizajnér „vytvoril“ v ​​jednom z prepracovaných programov, a tiež po napísaní copywritera vo forme textových súborov musí programátor rozloženia opatrne a namiesto rezania napísať kód skinovať nové stránky, vkladať do kódu rozrezávanie obrázkov a textu, spájať strany s prierezovými správami a prechodmi, pridávať tvary, ktoré sú iné, iné, iné... Monotónna, robotická rutina. Môžete si prečítať viac o fázach tvorby webových stránok

A my sme sa rozhodli, že zostávajúcou fázou je „nahranie“ hotovej stránky na trvalo nasadený server, jej nastavenie a doladenie tak, aby všetko fungovalo tak, ako potrebujeme, bez závad alebo chýb.

Ak teda chcete napísať webovú stránku, budete potrebovať poznať nasledujúce jazykové programovanie: HTML, CSS, JavaScript, PHP, MYSQL. Existujú aj iné jazyky, ktoré sú dnes najpopulárnejšie. A o kožných ochoreniach vám poviem podrobnejšie.

HTML(HyperText Markup Language) je označenie, ktoré popisuje formu zobrazenia informácií. Tento jazyk sa používa na vytvorenie stránky, inými slovami, pre rámec stránky.

CSS(Cascading Style Sheets) – takto môžete ovládať vonkajší vzhľad svojej webovej stránky. Pomocou dodatočného CSS môžete špecifikovať presné charakteristiky takmer všetkých prvkov webovej stránky.

JavaScript- Týmto spôsobom si môžete „užívať“ webovú stránku, za príplatok môžete urobiť webovú stránku interaktívnou, alebo inými slovami komunikovať so zákazníkom. Pomocou tejto pomoci môžete vytvárať kontextové okná alebo rady a oveľa viac. Tento jazyk nie je určený len na použitie pri vývoji webu.

PHP- toto je skriptovací server na písanie skriptov. V súčasnosti je najpopulárnejší a nie je dôležitý pre jeho popularitu. Z prosím pomôžte PHP Môžete spracovávať dáta na serveri, spracovávať súbory, sťahovať zoznamy, organizovať chat, fórum a oveľa viac.

MYSQL- toto je databáza. Za príplatok môžete po príkaze pridávať, meniť alebo mazať údaje alebo odstraňovať informácie. Ak poznáte MYSQL, môžete ľahko čítať databázy iných jazykov.

Predtým, ako sa pustíme do našej cesty cez lekcie tvorby webových stránok pomocou HTML a CSS, je dôležité pochopiť rozdiely medzi týmito dvoma jazykmi, syntax každého jazyka a základnú terminológiu.

Čo je HTML a CSS?

HTML (HyperText Markup Language) definuje štruktúru svojho obsahu, čo znamená obsah, ako sú nadpisy, odseky alebo obrázky. CSS (Cascading Style Sheets) alebo kaskádové štýly sú skvelou prezentáciou výtvorov pre dizajn pohľad zvonku dovnútra obsah, ako napríklad vikorist, napríklad písmo alebo farba.

Tieto dva jazyky - HTML a CSS sú nezávislé od jedného a toho istého a budú stratené. CSS nie je vinné z toho, že je napísané uprostred dokumentu HTML alebo mimo neho. Spravidla sa namiesto neho vždy zobrazí HTML a na jeho návrh sa vždy použije CSS.

S takými výraznými rozdielmi medzi HTML a CSS sa poďme ponoriť hlbšie do HTML.

Základné pojmy HTML

Skôr než začnete pracovať s HTML, pravdepodobne narazíte na nové a často prekvapivé pojmy. V priebehu rokov sa v tomto prehľade zoznámite so všetkými, ale budete musieť začať aj s tromi základnými pojmami HTML – prvkami, značkami a atribútmi.

prvkov

Prvky označujú, ako označiť štruktúru namiesto objektov na stránke. Tieto často používané prvky zahŕňajú niekoľko rovnakých nadpisov (označených ako prvky z

predtým

) І odseky (myslené ako

); Do zoznamu môžete zahrnúť prvky ,

, , і a veľa ďalších.

Prvky sú identifikované pomocou ramien päty<>, Na identifikáciu názvu prvku. Týmto spôsobom bude prvok vyzerať takto:

Tagy

Pridanie stopiek< и >Vedľa prvku vytvorte to, čo je známe ako značka. Štítky sa najčastejšie vyskytujú v pároch otvorených a zatvorených štítkov.

Kto otvorí značku, znamená začiatok prvku. K symbolu sa pridáva VIN<, затем идёт имя элемента и завершается символом >; napríklad,

.

Záverečná značka označuje koniec prvku. K symbolu sa pridáva VIN< с последующей косой чертой и именем элемента и завершается символом >; napríklad,

.

Namiesto toho, aby bol medzi značkami open a close, a namiesto tohto prvku. Posilannya, napríklad, ak matka otvorí značku a zatvorí štítok. Čo bude medzi týmito dvoma značkami namiesto odoslania.

Takže značky budú vyzerať asi takto:

...

atribúty

Atribúty a právomoci, ktoré musia byť na tento účel stanovené Ďalšie informácie o prvku. Medzi najrozsiahlejšie atribúty patrí atribút id, ktorý identifikuje prvok; atribút class, ktorý klasifikuje prvok; atribút src, čo znamená telo toho, kto sa narodil spolu; a atribút href, ktorý označuje odkaz na zdroj.

Atribúty sú uvedené v popise za názvom prvku. Podľa definície atribúty zahŕňajú mená a významy. Formát týchto atribútov pozostáva z názvu atribútu, za ktorým nasleduje symbol za ním a potom hodnota atribútu na kartách. Napríklad prvok S atribútom href uvidíte nadchádzajúcu objednávku:

Shay Howe

Ukážka základných pojmov HTML

Tento kód zobrazí text „Shay Howe“ na webovej stránke a po kliknutí na tento text sa zverejní na http://shayhowe.com. Prvok odosielania hlasov pre dodatočnú značku titulkov a zatvorí štítok Páči sa im text, ako aj atribúty a význam adresy a správy uverejnenej cez href = "http://shayhowe.com" v sprievodnom abstrakte.

Malý 1.01. Syntax HTML v schematickej forme obsahuje prvok, atribút a značku

Teraz, ak viete, čo sú HTML prvky, značky a atribúty, poďme sa pozrieť na našu prvú webovú stránku. Nech to vyzerá akokoľvek, je tu nové, nebojte sa – všetko rozlúštime za pochodu.

Úprava štruktúry HTML dokumentu

HTML dokumenty sú jednoducho textové dokumenty, Úspory s príponou.html, nie s príponou .txt. Ak chcete hneď začať písať HTML, budete potrebovať textový editor, ktorý môžete použiť od spoločnosti Wikoristan. Prepáčte, nechoďte sem Microsoft Word alebo Editory stránok, fragmentov a skladania. Dva najpopulárnejšie textové editory na písanie HTML a CSS sú Dreamweaver a Sublime Text. Medzi bezplatné alternatívy patrí aj Notepad++ pre Windows a TextWrangler pre Mac.

Všetky dokumenty HTML majú základnú štruktúru, ktorá obsahuje nasledujúce deklarácie a prvky: , , і .

Typ dokumentu Goloshennya alebonachádza sa v samom jadre dokumentu HTML a upozorňuje prehliadače, že verzia HTML sa aktualizuje. Úlomky vikorizujeme Verziu si ponechám HTML, náš typ dokumentu jednoducho bude. Ďalšia položka Čo znamená začiatok dokumentu?

v strede element znamená vyššia časť dokument vrátane rôznych metadát (podporné informácie o stránke). Umiestnené v strede prvku sa nezobrazuje na samotnej webovej stránke. Namiesto toho môžete zahrnúť názov dokumentu (ktorý sa zobrazí v záhlaví okna prehliadača) odoslaný do akýchkoľvek externých súborov alebo iných relevantných metadát.

Všetko viditeľné namiesto webovej stránky sa bude nachádzať v prvku . Štruktúra typického HTML dokumentu vyzerá takto:

Ahoj svet!

Ahoj svet!

Toto je webová stránka.

Ukážka štruktúry HTML dokumentu

Tento kód zobrazuje dokument, počnúc typom dokumentu,, Potom prvok okamžite príde . v strede ísť elementi і . element kód stránky pomocou značky a názov dokumentu cez prvok . element <body>obsahuje názov prostredníctvom prvku <h1>i odsek textu cez<р>. V prvku sú zahrnuté fragmenty, nadpis a odsek <body>, Môžete si to pozrieť na webovej stránke.</p><p>Ak je prvok v strede iného prvku, vrátane príloh, je dobré pridať nový záznam, aby bola štruktúra dokumentu dobre organizovaná a čitateľná. Predchádzajúci kód má urážlivé prvky <head>і <body>nánosy a deštrukcia uprostred živlu <html>. Štruktúra záznamov pre prvky je podobná novo pridaným prvkom v strede <head>і <body> .</p><h3>prvky samozatváracie</h3><p>Na prednom zadku je prvok <meta>byť jedným tagom, ktorý bez zahrnutia uzatváracieho tagu. Nebojte sa, celá vec bola rozbitá v dokonalosti. Nie všetky prvky sú zložené s otvorenými a zatvorenými značkami. Tieto prvky sú jednoducho zachytené namiesto správania prostredníctvom atribútov v rámci jednej značky. <meta>je jedným z týchto prvkov. namiesto prvku <meta>v aplikácii je priradený k doplnkovému atribútu charset a value. Medzi ďalšie typické samozatváracie prvky patria:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Bola vytvorená štruktúra, rozdelená na ďalšie podrobnosti typu dokumentu<!DOCTYPE html>a prvky <html> , <head>і <body>, Є ukončenie široké. Túto štruktúru dokumentu chceme zachovať manuálne, pretože pri vytváraní nových HTML dokumentov sa fragmenty často zaseknú.</p><h3>overenie kódu</h3><p>Bez ohľadu na to, ako starostlivo píšeme náš kód, chyby sú nevyhnutné. Našťastie v čase písania HTML a CSS máme validátor na kontrolu našej práce. W3C predstavuje validátory HTML a CSS, ktoré skenujú kód na paritu. Overenie nášho kódu nielenže pomáha zaistiť, že sa zobrazuje správne vo všetkých prehliadačoch, ale tiež pomáha zaistiť osvedčené postupy pri písaní kódu.</p><h2>V praxi</h2><p>Ako webdizajnéri a front-end vývojári si môžeme dopriať množstvo úžasných konferencií venovaných nášmu remeslu. Počas najbližších lekcií zorganizujeme globálnu konferenciu Styles Conference a vytvoríme pre ňu webovú stránku. To je správne!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy loading=lazy><p>Preskočme na HTML a pozrime sa na CSS. Pamätajte, že HTML definuje štruktúru našich webových stránok, zatiaľ čo CSS definuje ich vizuálny štýl a vzhľad.</p><h2>Základné výrazy CSS</h2><p>Okrem výrazov HTML existuje niekoľko základných výrazov CSS, s ktorými sa budete musieť oboznámiť. Tieto pojmy zahŕňajú selektory, právomoci a hodnoty. Rovnako ako v terminológii HTML, čím viac pracujete s CSS, tým viac sa výrazy stávajú vašou inou prirodzenosťou.</p><h3>selektívne</h3><p>Pri pridávaní prvkov na webovú stránku je možné ich štylizovať pomocou dodatočného CSS. Selektor určuje, na ktorý prvok alebo prvky v HTML sa zacieli a na ktoré sa použijú štýly (napríklad farba, veľkosť a poloha). Selektory môžu obsahovať kombináciu rôznych indikátorov na výber jedinečných prvkov v závislosti od toho, ako konkrétne ich chcete mať. Napríklad chceme vybrať každý odsek na stránke alebo vybrať len jeden konkrétny odsek.</p><p>Selektory sú spravidla spojené s hodnotami atribútov, napríklad s hodnotou id alebo triedy alebo názvu prvku, napr. <h1>alebo iný<р> .</p><p>V CSS sú selektory spojené s kučeravými oblúkmi (), ktoré obsahujú štýly, ktoré sú priradené k vybranému prvku. Tento selektor cieľa pre všetky prvky <span><p>P(...)</p><h3>moc</h3><p>Ako prvok volieb moc označuje štýly, ktoré budú ďalej stagnovať. Názvy orgánov idú za selektorom v strede <a href="https://crashbox.ru/sk/boot-disk/vse-sposoby-kak-v-vorde-postavit-kvadratnye-skobki-stavim-figurnye/">figurálne chrámy</a>() І bez stredu pred dvojitou ofinou. Je jasné, že neexistujú žiadne autority, ktoré by sme mohli zmeniť, ako napríklad pozadie, farbu, veľkosť písma, výšku a šírku, a iné sú často dané orgánom. Aktuálny kód označuje silu farby a veľkosti písma, ktorá platí pre všetky prvky <span><p>P (farba: ...; veľkosť písma: ... ;)</p><h3>význam</h3><p>Zatiaľ si len ľudia cez selektor vybrali prvok a cez úrady určili, ktorý štýl by chceli ustrnúť. Teraz môžeme nastaviť správanie tejto sily cez hodnoty. Hodnoty môžu byť označené ako text medzi bodkami a bodkami. Nižšie vyberieme všetky prvky <p >Nastavil som hodnotu farby na oranžovú a hodnotu veľkosti písma na 16 pixelov.</p><p>P (farba: oranžová; veľkosť písma: 16px;)</p><p>Aby sme to zhrnuli, v CSS naša sada pravidiel začína selektorom a potom nasleduje tvary luku. V týchto kučeravých úklonoch je slepota, ktorá sa vyvíja z párov sily a významu. Zmätenosť kože začína mocou, po ktorej nasleduje bodkovaná čiara, význam moci a nakoniec bodka s kómou.</p><p>Rozšírená prax zahŕňa rozbitie mocenských vzťahov a dôležitosť stredu oblúkov. Podobne ako HTML, aj vstupy pomáhajú udržiavať náš kód organizovaný a logický.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy loading=lazy></p><p>Malý 1.03. Štruktúra syntaxe CSS zahŕňa selektor, mocniny a hodnoty</p><p>Znalosť niekoľkých základných pojmov a základnej syntaxe CSS je dobrý začiatok, ale stále musíme zvážiť niekoľko ďalších bodov, najprv do hĺbky. Zokrema, musíme sa bližšie pozrieť na to, ako fungujú selektory v CSS.</p><h2>Práca so selektormi</h2><p>Selektory, ako už bolo spomenuté vyššie, indikujú, ktoré prvky HTML budú štylizované. Je dôležité pochopiť, ako sa selektory používajú a ako fungujú. Prvým krokom je vedieť <a href="https://crashbox.ru/sk/iron/zenfone-3-laser-otnositsya-k-srednemu-bluetooth---eto-standart-bezopasnogo/">odlišné typy</a> selektor. Pozrime sa na samotné základné selektory: selektory typov, triedy a identifikátory.</p><h3>selektor typu</h3><p>Selektory typu zacieľujú na prvky podľa ich typu. Napríklad preto, že sa chceme sústrediť na všetky prvky <div>Je to naša chyba, že používame selektor div. Predbežný kód zobrazuje selektor typu pre prvky <div>, A tiež pôvodné HTML.</p><p>Div (...)</p><p> <div>...</div> <div>...</div> </p><h3>nóbl</h3><p>Triedy vám umožňujú vybrať prvok na základe hodnoty atribútu triedy. Selektory tried sú o niečo špecifickejšie ako selektory typu, pretože vyberajú jednu skupinu prvkov a nie všetky prvky rovnakého typu.</p><p>Triedy vám umožňujú aplikovať rovnaké štýly na rôzne prvky s použitím rovnakých hodnôt atribútov triedy pre každý prvok.</p><p>V CSS sú triedy reprezentované bodkou vpredu, za ktorou nasleduje hodnota atribútu class. Selektor triedy nižšie vyberie všetky prvky, ktoré zodpovedajú hodnote atribútu úžasné triedy, vrátane prvkov <div>і <span><p>Úžasné (...)</p><p> <div class="awesome">...</div> </p><h3>ID</h3><p>Identifikátory sú ešte presnejšie, nižšej triedy, pretože sa zameriavajú iba na jeden jedinečný prvok naraz. Rovnako ako selektory tried vyberajú hodnoty atribútu triedy, identifikátory vyberajú hodnoty atribútu id ako selektor.</p><p>Bez ohľadu na typ zobrazeného prvku je možné hodnotu atribútu id na stránke zmeniť iba raz. Ak je id prítomné, potom sú vinníci vyhradení pre dôležité prvky.</p><p>V CSS sú identifikátory reprezentované symbolom hash vpredu, za ktorým nasleduje hodnota atribútu id. Tu identifikátor vyberie iba prvok, na ktorý sa umiestni atribút id s hodnotami Shayhowe.</p><p>#shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>prídavné voliče</h3><p>Selektory sú veľmi ťažká vec a popisy sa čoraz viac rozširujú na čo najširšiu škálu selektorov, s ktorými sa zaoberáme. Tieto selektory sú len klasy. Vložených voličov je veľa a sú ľahko dostupné. Ak ste si ich vedomí, nebojte sa žasnúť nad ich progresívnejším konaním.</p><p>Garazd, začíname zbierať všetko naraz. Pridáme prvky na stranu v strede nášho HTML, potom môžeme tieto prvky vybrať a upraviť ich pomocou dodatočného CSS. Teraz spojme bodky medzi HTML a CSS, aby tieto dva mohli spolupracovať.</p><h2>CSS pripojenia</h2><p>Aby sme pochopili naše CSS a naše HTML, musíme ukázať na súbor CSS s HTML. Je dobrou praxou zahrnúť všetky naše štýly do jedného <a href="https://crashbox.ru/sk/installation-and-configuration/ne-kopiruetsya-bolshoi-fail-na-vneshnii-disk-reshenie-problemy-s-nevozmozhnostyu/">externý súbor</a> Aký je indikátor v strede prvku? <head>náš HTML dokument. Použitie jedného nového CSS nám umožňuje vytvárať rovnaké štýly na celom webe a rýchlo vykonávať zmeny v každom z nich.</p><h3>Ďalšie možnosti pridania CSS</h3><p>Medzi ďalšie možnosti prepojenia CSS patrí použitie interných a externých štýlov. V skutočnosti si môžete byť vedomí týchto možností, ale zvyčajne nie sú chválené, pretože aktualizácia stránok je ťažkopádna a nemotorná.</p><p>Pre našu tvorbu <a href="https://crashbox.ru/sk/useful-tips/v-skd-dobavit-tablicu-znachenii-skd-vneshnii-istochnik-dannyh/">externé tabuľky</a> Opäť chceme použiť textový editor na vytvorenie nového textového súboru s príponou .css. Náš súbor CSS je uložený v rovnakom priečinku ako náš súbor HTML.</p><p>v strede živlu <head>prvok sa stáva stagnujúcim <link>, Čo znamená čiary medzi súbormi HTML a CSS. Keďže máme vzťah k CSS, na vloženie riadkov používame atribút rel na hodnotách šablóny štýlov. Okrem toho sa atribút href používa na označenie umiestnenia rozšírenia súboru CSS.</p><p>V súčasnej aplikácii prvku dokumentu HTML <head>ukazuje na externý súbor štýlu.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Aby sa zabezpečilo, že sa CSS vykreslí správne, pri ukladaní súboru CSS sa musí starostlivo starať o hodnotu atribútu href. V prvom prípade sa súbor main.css uloží na rovnaké miesto ako súbor HTML, ktorý je známy aj ako koreňový priečinok.</p><p>Ak je súbor CSS vykreslený v priečinku, hodnoty atribútu href môžu zjavne súvisieť s týmto spôsobom. Napríklad, ak je náš súbor main.css uložený v priečinku s názvom stylesheets, hodnota atribútu href bude stylesheets / main.css. V tomto prípade sa rizikový vrkoč (alebo lomka) používa na označenie presunu do podpriečinka.</p><p>Momentálne naše stránky začínajú ožívať. CSS sme zatiaľ príliš neprenikli, no možno ste si všimli, že niektoré prvky majú štýly, ktoré sme v našom CSS nespomenuli. Tento prehliadač vkladá týmto prvkom svoje vlastné štýly. Našťastie môžeme tieto štýly ľahko prepísať, čo môžeme použiť na stiahnutie CSS.</p><h2>Wikoristannya CSS škrabka</h2><p>Prehliadač vzhľadu používa svoje vlastné štýly na zabalenie rôznych prvkov. To je ako <a href="https://crashbox.ru/sk/installing-multiple-os/rasshirenie-otklyucheno-tak-kak-istochnik-polucheniya-neizvesten-kak/">Google Chrome</a> zrkadlí nadpisy, odseky, zoznamy atď., sa môže líšiť v závislosti od toho, ako funguje <a href="https://crashbox.ru/sk/tools-to-help/what-does-it-mean-to-be-an-obsolete-plugin-how-do-i-update-the-adobe-flash-player-plugin/">internet Explorer</a>. Na zabezpečenie konzistentnosti s rôznymi prehliadačmi sa široko používa sťahovanie CSS.</p><p>CSS drop preberá všetky základné HTML elementy z daného štýlu a poskytuje <a href="https://crashbox.ru/sk/protection/novyi-stil-v-instagramme-edinyi-stil-v-instagram-instagram-podbiraem-podhodyashchii/">jeden štýl</a> pre všetky prehliadače. Tieto zľavy môžu zahŕňať rôzne veľkosti, otvory, okraje alebo ďalšie štýly, ktoré znížia tieto hodnoty. Fragmenty kaskádovania CSS fungujú smerom nadol (čoskoro sa o tom dozviete) - naše kaskádovanie je spôsobené tým, že je na samom vrchole nášho štýlu. To zaručuje, že tieto štýly sa čítajú ako prvé <a href="https://crashbox.ru/sk/solving-problems/chto-znachit-ochistit-kesh-brauzera-ochistka-kesha-raznyh/">Rôzne prehliadače</a> začnite pracovať od miesta rezu smerom dopredu.</p><p>Na použitie sú k dispozícii rôzne lyžiny CSS, z ktorých všetky majú svoje silné stránky. Jedným z najpopulárnejších je použitie úprav CSS Erica Meyera na zahrnutie nových prvkov HTML5.</p><p>Ak sa cítite trochu ako dobrodruh, toto je tiež Normalize.css, ktorý vytvoril Nicholas Gallagher. Normalize.css sa nezameriava na výber tvrdého skimmingu pre všetky hlavné prvky, ale namiesto toho na nainštalované štýly pozadia pre tieto prvky. Vyžaduje si to hlbšie pochopenie CSS, ako aj vedieť, čo chcete zahrnúť do štýlu.</p><h3>Kompatibilita a testovanie medzi prehliadačmi</h3><p>Ako ste už možno uhádli, rôzne prehliadače zobrazujú prvky odlišne. Je dôležité poznať význam kompatibility a testovania medzi prehliadačmi. Stránky nie sú na vine, aby sa zobrazovali výlučne vo všetkých prehliadačoch, inak budú vinníci podobní. Ktoré prehliadače chcete podporovať a v akom svete sa budete musieť rozhodnúť na základe toho, čo najlepšie funguje pre vašu stránku.</p><p>Existuje kopa rečí o tom, ako stratiť rešpekt pri písaní CSS. Dobrou správou je, že všetko je možné a vyžaduje si trochu trpezlivosti.</p><h2>V praxi</h2><p>Vráťme sa a naposledy sa pozrime na našu konferenčnú stránku a uvidíme, ako môžeme pridať trochu CSS.</p><ol><li>V strede nášho priečinka štýly-konferencia poďme tvoriť <a href="https://crashbox.ru/sk/useful-tips/delete-the-old-windows-to-install-a-new-one-extra-folder-windows-old-how-to-remove/">nový priečinok</a> s mojim majetkom. Uložíme všetky zdroje pre našu webovú stránku, ako sú štýly, obrázky, videá atď. Pre naše štýly pridáme do stredu priečinka aktív ďalší priečinok so štýlmi.</li><li>Pomocou textového editora vytvorte nový súbor s názvom main.css a uložte ho do priečinka so štýlmi, ktorý sme práve vytvorili.</li><p>Pri pohľade na súbor index.html v prehliadači vidíme, aké prvky <h1>і <p>Už sa mstí za štýl oblečenia. Zokrema, majú jedinečnú veľkosť písma a priestor okolo seba. Eric Meyer's vikorystskiy vyradenie môžeme zmierniť tieto štýly, aby sme mohli umožniť každému z nich začať od nového základu. Ak to chcete urobiť, pozrite sa na svoju stránku, skopírujte kód a prilepte ho na začiatok nášho súboru main.css.</p><p>/* Http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licencia: none (public domain) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, veľký, citovať, kód, del, dfn, em, img, ins, kbd, q, s, samp, malý, úder, silný, sub, sup, tt, var, b, u, i, stred, dl, dt, dd, ol, ul, li, fieldset, formulár, štítok, legenda, tabuľka, titulok, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, navigácia, výstup, rubín, sekcia, súhrn, čas, značka, zvuk, video (okraj: 0; odsadenie: 0; okraj: 0; veľkosť písma: 100 %; písmo: zdediť; zvislé zarovnanie: základná čiara ;) / * Obnovenie roly zobrazenia HTML5 pre staršie prehliadače * / článok, bokom, podrobnosti, popis obrázku, obrázok, päta, hlavička, hgroup, menu, navigácia, sekcia (display: block;) body (line-height: 1;) ol, ul (štýl zoznamu: žiadne;) blockquote, q (úvodzovky: žiadne;) blockquote: pred, blockquote: po, q: pred, q: po (obsah: ""; obsah: žiadny;) tabuľka (ohraničenie- zbalenie: c ollapse; rozstup medzi okrajmi: 0; )</p><li>Náš súbor main.css sa začína formovať, tak ho prepojme so súborom index.html. Otvorte index.html v <a href="https://crashbox.ru/sk/the-choice-of-operating-system/standartnye-prilozheniya-windows-7-perechen-standartnyh-programm-windows-bloknot-i/">textový editor</a> a pridajte objekt <link>V <head>, Bezprostredne po živle <title> .</li><li>Niektorí z nás označujú štýly prostredníctvom prvku <link>Pridajte atribút rel k hodnotám šablóny so štýlmi.</li><p>V našom súbore main.css zahrnieme aj atribút href. Pamätajte, že náš súbor main.css je uložený v priečinku so štýlmi, ktorý sa nachádza v strede priečinka aktív. Hodnota atribútu href, ktorý je cestou k nášmu súboru main.css, je teda aktíva / šablóny so štýlmi / main.css.</p><p> <head> <meta charset="utf-8"> <title>Konferencia štýlov

Je čas zhodnotiť našu prácu a zistiť, ako naše HTML a CSS spolupracujú. Otvorenie súboru index.html (alebo aktualizácia stránky, ak je už otvorená) v prehliadači môže ukázať mierne odlišný výsledok ako predtým.

Malý 1.04. Naša stránka Konferencia štýlov s CSS zľavami

Ukážkový a výstupný kód

Nižšie si môžete pozrieť webovú stránku Konferencie štýlov vo vašej krajine a tiež ju navštíviť výstupný kód stránky v súčasnosti.

zhrnutie

Och, všetko je v poriadku! V tejto lekcii sme zabili veľa skvelých tvorov.

Len si pomyslite, teraz poznáte základy HTML a CSS. Keď strávite viac ako hodinu písaním HTML a CSS, budete s týmito dvoma jazykmi pracovať pohodlnejšie.

Môžeme hádať, na čo sme sa pozreli ďalej:

  • Rozdiel medzi HTML a CSS.
  • Oboznámenie sa s prvkami HTML, značkami a atribútmi.
  • Úprava štruktúry vašej prvej webovej stránky.
  • Oboznámenie sa so selektormi, ovládacími prvkami a hodnotami CSS.
  • Práca so selektormi CSS.
  • Ukážka CSS a HTML.
  • Dôležitosť CSS klesá.

Teraz sa pozrime bližšie na HTML a dozvieme sa niečo o sémantike.

Zdroje a úsilie

  • Bežné výrazy HTML cez Scripting Master
  • Podmienky a definície CSS prostredníctvom pôsobivých webov
  • Nástroje CSS: Resetujte CSS pomocou Erica Meyera

Webové stránky môžu byť vytvorené v akomkoľvek formáte, ako aj v súlade so štandardom Hyper Text Markup Language - formátovanie hypertextov, použitie písaného textu, vyplneného obrázkami, zvukom, animáciou, videom a hypertextovými správami na Iné dokumenty roztrúsené všade webový priestor, takže sa nachádza na niečí serveri alebo ako skladová časť niečieho webového projektu.

Môžete ho použiť na webe bez znalosti jazyka HTML, fragmentov HTML text môžu byť vytvorené rôznymi špeciálnymi editormi a konvertormi. Nezáleží na tom, či píšete v HTML bez stopy. Je možné, ale jednoduchšie, použiť HTML editor alebo konvertor, ktorý je často obmedzený vo svojich možnostiach, robiť chyby alebo vytvárať špinavý HTML kód, ktorý nefunguje na iných platformách.

Jazyk HTML existuje v niekoľkých variantoch a neustále sa vyvíja, ale konštrukcie HTML sa budú v budúcnosti naďalej revidovať. Použitím HTML a jeho detailnejším porozumením, vytvorením dokumentu na základe používania HTML a jeho rozšírením do maximálnej možnej miery môžeme byť schopní vytvárať webové stránky, ktoré je možné prezerať širokou škálou webových prehliadačov, či už teraz alebo v budúcnosť. . To nevylučuje možnosť použitia iných metód, napríklad metódy rozšírených možností, ktorú poskytuje Netscape Navigator, Internet Explorer alebo akékoľvek iné programy.

Práca s HTML je spôsob, ako zachytiť osobitosti vytvorených dokumentov v štandardizovanom jazyku, vikoryste a rozšíreniach, len keď je to skutočne potrebné.

HTML bv ratifikácie konzorcia World Wide Web. Podporujú ho niektoré široko používané prehliadače a môže sa stať náhradou akéhokoľvek softvéru, ktorý súvisí s webom.