Úlohy Základy HTML sú navrhnuté tak, aby konsolidovali prácu so súborom nasledujúcich tém: HTML štruktúra, komentáre v HTML, hlavné značky, základné atribúty HTML. .

Úlohy pre obrázky v HTML: vložiť obrázok do html(HTML kód obrázka), Veľkosť HTML obrázka, zarovnanie obrazu...v HTML.

Pokročilé úlohy HTML a CSS

HTML úlohy s Emmetom. Rýchle rozloženie, tímy Emmet (tzv cheat sheet Emmet). Po dokončení úloh s doplnkom Emmet sa rýchlosť vášho rozloženia/vývoja výrazne zvýši. .

Úlohy pre selektory CSS. Selektor CSS: selektory triedy css, css selektory atribútov, susedné selektory css, kontextové selektory CSS, detské selektory + v css, prednosť selektorov. .

Práca CSS polohovanie dôležité pre pochopenie zložitých rozložení. Tu sú úlohy na pochopenie a prácu s: pozícia absolútne, relatívnej polohy, poloha pevná a poloha statická, Vlastnosti CSS vľavo dole vpravo. .

Úlohy rozloženia formulára

1. Implementujte na stránku autentifikačný formulár, rovnaký ako v Twitter Bootstrap (bez použitia tohto rámca). Napríklad ako v .
2. Vytvorte formulár dispečera na mieste
3. Pripojte doplnok jQuery a vyberte dátum/mesiac z poľa
4. Vytvorte začiarkavacie políčko podobné sociálnej sieti.
5. Vytvorte registračný formulár návštevníka stránky
6. Vytvorte formulár podobný tomu, ktorý triedi produkty v Yandex.Market

Jednou z úloh kodéra je písať kód medzi prehliadačmi. Kód, ktorý umožní, aby stránky vyzerali rovnako alebo čo najpodobnejšie v čo najväčšom počte prehliadačov. .

Moderné možnosti CSS umožňujú vytvárať nádherné a pracovať s pozadím jeho vyfarbovaním. gradientová výplň. malá sada úlohy pre animáciu CSS.

Úlohy pre mediálne dopyty (mobilné stránky). Vytvorenie mobilnej verzie stránky je dôležitou súčasťou zručností webových vývojárov. Úlohy sú venované témam: tvorba mobilnej stránky, kontrola mobilnej verzie stránky. .

Úlohy pre rozloženie psd layout a CSS frameworky. Rozloženie webovej stránky založené maketa psd- najdôležitejšia časť práce webdizajnéra. V lekciách HTML sa venujeme základným krokom rozloženia z psd do html. Úlohy .

Praktická práca s HTML

Úloha číslo 1.

Vytvorenie základného súboru HTML

1. Vytvorte si osobný priečinok, do ktorého budete ukladať všetky svoje webové súbory.

2. Kliknite pravým tlačidlom myši a vyberte "Nový" - "Vyprázdniť súbor".

3. Zadajte názov súboru rasp.html.

4. Kliknite pravým tlačidlom myši na „Otvoriť pomocou“ – „Podložka pod myš“

5. Napíšte najjednoduchší html dokument:

Tréningový súbor HTML

Rozvrh na stredu.

6. Uložte dokument, zatvorte editor.

7. Dvakrát kliknite na dokument rasp.html a skontrolujte výsledok.

Úloha číslo 2.

Ovládanie rozloženia textu na obrazovke

1. Postupujte podľa kroku č. 4 z predchádzajúcej úlohy pre súbor rasp.html

2. Vykonajte zmeny v súbore rasp.html umiestnením slovRozvrh, hodiny, na stredu na rôznych linkách.

Príklad:

Rozvrh

triedy

na stredu.

Nebuďte prekvapení, že vzhľad vašej webovej stránky sa nezmenil.

Úloha číslo 3.

Ovládanie rozloženia textu na obrazovke 2

1. Postupujte podľa kroku č. 4 z prvej úlohy pre súbor rasp.html

2. Vykonajte zmeny v súbore rasp.html:

Príklad:

Rozvrh

triedy

na stredu.

3. Uložte text so zmenami vykonanými v súbore rasp.html.

4. Dvojitým kliknutím otvorte dokument rasp.html a skontrolujte výsledok.

Vzhľad čiar by sa mal zmeniť. Prečo sa mení text?

Úloha číslo 4.

Formátovanie textu

značka zalomenia riadku
oddeľuje riadok od nasledujúceho textu alebo grafiky.

značka odseku

tiež oddeľuje riadok, ale pridáva aj prázdny riadok, ktorý vizuálne

zvýrazní odsek.

Tréningový súbor HTML

Rozvrh

triedy

Na stredu.

3. Uložte text so zmenami vykonanými v súbore rasp.html.

4. Dvojitým kliknutím otvorte dokument rasp.html a skontrolujte výsledok.

Úloha číslo 5.

Formátovanie textu

1. Vykonajte zmeny v súbore RASP.HTML

Tréningový súbor HTML

Rozvrh

triedy

na stredu.

3. Uložte text so zmenami vykonanými v súbore rasp.html.

4. Dvojitým kliknutím otvorte dokument rasp.html a skontrolujte výsledok.

5. Odpovedzte na otázku, aké značky sa používajú na nastavenie podčiarknutého, kurzíva, tučného písma?

Úloha číslo 6.

Určenie veľkostí znakov webovej stránky

Existujú dva spôsoby, ako ovládať veľkosť textu zobrazovaného prehliadačom:

používanie štýlov nadpisov,

nastavte veľkosť písma hlavného dokumentu alebo aktuálnu veľkosť písma.

Používa sa šesť značiek nadpisu: od

predtým

(značka je dvojitá, t.j. treba ju zavrieť).

Každá značka má špecifický štýl definovaný nastaveniami prehliadača.

1. Vykonajte zmeny v súbore RASP.HTML

Tréningový súbor HTML

Rozvrh hodín

na stredu.

3. Uložte text so zmenami vykonanými v súbore rasp.html.

4. Dvojitým kliknutím otvorte dokument rasp.html a skontrolujte výsledok.

5. Nahraďte značku h1 značkou h2-h6 a uvidíte, ako sa zmení veľkosť hlavičky.

Úloha číslo 7.

Nastavenie aktuálnej veľkosti písma

značka písma umožňuje nastaviť veľkosť aktuálneho písma na jednotlivých miestach v texte v

rozsah od 1 do 7.

Tréningový súbor HTML

Rozvrh hodín

na stredu.

3. Uložte text so zmenami vykonanými v súbore rasp.html.

4. Dvojitým kliknutím otvorte dokument rasp.html a skontrolujte výsledok.

5. Nahraďte veľkosť písma inými a uvidíte, ako sa zmení veľkosť textu.

Úloha číslo 8.

Nastavenie farby písma

Tag poskytuje kontrolu nad typom písma, farbou a veľkosťou textu.

Ak chcete zmeniť farbu písma, môžete použiť značku atribút COLOR=”X”. Namiesto

“X“ musíte nahradiť anglický názov farby v úvodzovkách (“ ”) alebo jej hexadecimálne číslo

význam. Pri zadávaní farby ako hexadecimálneho čísla musíte túto farbu reprezentovať

rozkladá sa na tri zložky: červená (R - Red), zelená (G - Green), modrá (B - modrá),

z ktorých každá má hodnotu od 00 do FF. V tomto prípade máme do činenia s tzv

RGB formát.

Príklady písania textu vo formáte RGB sú uvedené v tabuľke 1:

1
. Vykonajte zmeny v súbore RASP.HTML

Tréningový súbor HTML

Rozvrh

Kurzy na stredu.

3. Uložte text so zmenami vykonanými v súbore rasp.html.

4. Dvojitým kliknutím otvorte dokument rasp.html a skontrolujte výsledok.

5. Zmeňte farbu na inú a pozrite si výsledok značky písma.

Úloha číslo 9.

Zarovnajte text vodorovne.

Zarovnanie textu určuje jeho vzhľad a orientáciu okrajov odsekov a môže byť vľavo, vpravo, na stred alebo zarovnané. Značka odseku sa zvyčajne používa na nastavenie zarovnania textu.

s atribútom align, ktorý určuje spôsob zarovnania. Atribút align môže nadobúdať nasledujúce hodnoty: left, right, center, justifyzarovnanie doľava, doprava, na stred a zarovnanie doľava.

1. Vykonajte zmeny v súbore RASP.HTML

Tréningový súbor HTML

Rozvrh

triedy na stredu.

3. Uložte text so zmenami vykonanými v súbore rasp.html.

4. Dvojitým kliknutím otvorte dokument rasp.html a skontrolujte výsledok.

Vytvorte webovú stránku podľa nasledujúceho príkladu.

Zátvorky označujú farbu textu. Musí byť prítomné zarovnanie textu.

Pomenujte súborsušienka.html

Reg.ru: domény a hosting

Najväčší registrátor a poskytovateľ hostingu v Rusku.

V prevádzke je viac ako 2 milióny doménových mien.

Propagácia, mail pre doménu, riešenia pre podnikanie.

Svoj výber si už vybralo viac ako 700 tisíc zákazníkov po celom svete.

*Prejdením myšou pozastavíte rolovanie.

Späť dopredu

30 dobrých postupov CSS pre začiatočníkov

CSS je jazyk, ktorý v určitom okamihu používa takmer každý vývojár. Aj keď to niekedy považujeme za samozrejmosť, napriek tomu je to silný nástroj a má veľa nuancií vo svojej aplikácii, ktoré pomáhajú pri vývoji kvalitného dizajnu (alebo sťažujú tento proces). Nižšie je uvedených 30 dobrých pokynov, ktoré vám pomôžu napísať správny a kompetentný kód a vyhnúť sa mnohým bežným chybám.

1. Uľahčite si čítanie

Ľahká čitateľnosť vášho súboru CSS je veľmi dôležitá, aj keď mnohí tento bod podceňujú. Dobrá čitateľnosť vám s podporou stránky umožňuje v budúcnosti s ňou jednoducho pracovať, keďže potrebné prvky nájdete mnohonásobne rýchlejšie. Uvedomte si tiež, že váš súbor možno bude musieť skontrolovať a opraviť niekto iný.

Poznámka
Pri písaní súborov CSS väčšina vývojárov spadá do dvoch kategórií, dvoch extrémov.

Skupina 1: Všetko v jednom riadku

SomeDiv ( pozadie: červené; výplň: 2em; orámovanie: 1px plná čierna; )

Skupina 2: Každý štýl má samostatný riadok

SomeDiv ( pozadie: červené; výplň: 2em; orámovanie: 1px plná čierna; )

V skutočnosti sú obe praktiky celkom dobré, aj keď medzi zástupcami týchto skupín často dochádza k nezhodám! Len majte na pamäti – musíte si vybrať možnosť, na ktorú sa radi pozeráte. To je všetko.
Poznámka

2. Urobte to celé

Okrem toho, aby bol váš kód čitateľnejší, urobte ho koherentnejším. Mali by ste začať vyvíjať svoj vlastný „podjazyk“ CSS, ktorý vám umožní držať sa konkrétneho štýlu pomenovania. Existuje určitý počet tried, ktoré vytváram takmer stále, a zakaždým im dávam rovnaké mená. Ja používam napr .nápis-vpravo na zarovnanie obrázkov na pravú stranu.

Zamyslite sa nad tým, či a kedy budete v názvoch tried a ID používať pomlčky a podčiarkovníky. Keď začnete vytvárať vlastné štandardy pre CSS, stanete sa oveľa bližšie k profesionálom v tejto oblasti.

3. Začnite s rámcom

Mnoho ľudí si myslí, že CSS rámce by sa nemali používať, ale myslím si, že ak si niekto našiel čas a vytvoril program, ktorý vám umožní urýchliť proces vývoja, tak prečo vymýšľať znovu koleso? Viem, že rámce by sa nemali používať všade, ale v mnohých prípadoch je ich použitie opodstatnené.

Mnoho dizajnérov si vytvára svoje vlastné rámce počas práce, a to je tiež skvelý nápad, ako udržať kód konzistentný a konzistentný v rámci projektov.

Poznámka
Nesúhlasím. CSS frameworky sú nepostrádateľnou vecou, ​​ale len pre pár, pre tých, ktorí ich vedia používať.

„Nejde o vynájdenie kolesa, ale skôr o pochopenie toho, ako to funguje“

Ak s kaskádovými štýlmi ešte len začínate, odporúčal by som, aby ste sa aspoň na rok zdržali rôznych rámcov. V opačnom prípade si len mätieš sám seba. Najprv sa naučte CSS a potom optimalizujte prácu s týmto jazykom.
Poznámka

4. Použite nulovanie

Väčšina frameworkov CSS má vstavaný štýl „nullifier“, ale ak ho nemienite používať, môžete sa uchýliť k iným „nullifierom“. Obnovením štýlov sa vyhnete mnohým problémom s nerovnomerným zobrazením naprieč prehliadačmi nastavením jasných parametrov pre veľkosti písma, nadpisy, odsadenie a odsadenie atď. Toto „nulovanie“ vám umožňuje dosiahnuť rovnaké zobrazenie vo všetkých prehliadačoch.

Tu sú odkazy na niektoré z najpopulárnejších resetov: MeyerWeb, vývojársky reset Yahoo. Prípadne si môžete vymyslieť svoj vlastný „nulovač“ na základe nasledujúceho.

5. Štruktúrujte svoje súbory štýlov zhora nadol

Vždy má zmysel štruktúrovať váš súbor CSS, aby ste mohli rýchlo nájsť časť kódu, ktorú potrebujete. Odporúčam použiť prístup zhora nadol, čo znamená napísať šablónu so štýlmi v poradí, v akom sú štýly aplikované na stránke. Napríklad:

1. Všeobecné triedy (body, a, p, h1 atď.) 2. #header 3. #nav-menu 4. #main-content

Nezabudnite uviesť komentár ku každej sekcii!

/****** hlavný obsah *********/ štýly prejdite sem... /****** päta ********/ štýly prejdite sem...

6. Skupinové položky

Prvky môžu mať často prekrývajúce sa zdieľané štýly. Namiesto prepisovania existujúceho kódu je lepšie len zoskupiť prvky. Napríklad vaše hlavičky h1, h2 a h3 môže mať rovnaké písmo a farbu:

H1, h2, h3 (rodina písma: tahoma, farba: #333)

7. Najprv vytvorte značku HTML

Mnoho vývojárov vytvára súbor CSS súbežne s vytváraním značiek HTML. Zdá sa to logické, ale stále môžete ušetriť veľa času, ak najprv pochopíte HTML a až potom štýly. Tento prístup vám umožňuje myslieť na stránku ako na celok, premýšľať o tom, kde použiť ktoré štýly, výsledkom čoho je koherentnejšia šablóna so štýlmi zhora nadol.

8. V prípade potreby použite na prvok viacero tried

Niekedy je lepšie použiť na prvok viacero tried naraz. Predpokladajme, že máte kontajner div na ktoré sa chcete spýtať plavák:vpravo a už máš triedu .správny vo vašej šablóne so štýlmi, ktorá zarovná všetko doprava. Do kontajnera môžete pridať ešte jednu triedu div:

Môžete pridať toľko tried, koľko chcete, oddelených medzerami.

Poznámka
Buďte veľmi opatrní pri používaní mien ako napr vľavo a správny. Predstavte si, že zrazu potrebujete zarovnať nádobu na ľavú stranu. V tomto prípade sa musíte vrátiť ku kódu HTML a zmeniť názov triedy – všetko preto, aby ste zmenili vizuálny vzhľad stránky. Je to nesémantické. Pamätajte: HTML je na značkovanie, CSS je na vizuálnu prezentáciu.

Ak potrebujete úpravy v HTML na zmenu dizajnu stránky, robíte niečo zle!

9. Použite správnu značku doctype

Oba typy položiek zahŕňajú:

Span, a, strong, em, img, br, input, abbr, akronym

Medzi prvky bloku patria:

Div, h1...h6, p, ul, li, tabuľka, blockquote, pre, form

13. Usporiadajte vlastnosti podľa abecedy

Použitie tohto systému rozloženia nehnuteľnosti vám ušetrí veľa času pri hľadaní tej správnej nehnuteľnosti.

#cotton-candy ( farba: #fff; float: left; font-weight: height: 200px; margin: 0; padding: 0; width: 150px; )

Poznámka
Eh .. obetujte rýchlosť pre mierne lepšiu čitateľnosť .. Presvedčte sa sami ..
Poznámka

14. Používajte CSS kompresory

Kompresory CSS pomáhajú výrazne zmenšiť veľkosť súboru štýlu odstránením nadbytočných zalomení riadkov a kombinovaním prvkov. To všetko umožňuje rýchlejšie načítanie vašej stránky. CSS Optimizer a CSS Compressor sú dve skvelé online služby na takéto veci.

Spolu so zmenšením veľkosti súboru prirodzene dochádza k výraznému zníženiu jeho čitateľnosti, preto takéto služby využívajte, keď sa už neočakávajú zmeny štýlov.

15. Používajte bežné triedy

Čoskoro si všimnete, že existujú štýly, ktoré aplikujete znova a znova. Namiesto pridávania tohto štýlu ku každému ID môžete vytvoriť generické triedy a pridať ich k iným ID tried CSS (pozri tip č. 8 tohto článku).

Všimol som si napríklad, že používam plavák:vpravo a plavák: vľavo znova a znova vo svojich dizajnoch. Len pridávam triedy .vľavo a .správny do mojej šablóny so štýlmi a použiť ju na prvky.

Vľavo (float:left) .right (float:right)

Takto nemusíte neustále písať plavák: vľavo pre všetky prvky, na ktoré chcete použiť túto vlastnosť.

16. Použite "Margin: 0 auto" na vycentrovanie vášho návrhu

Mnoho nováčikov CSS nechápe, prečo nemôžu jednoducho používať plavák: stred aby sa dosiahol centrovací efekt pre blokové prvky. Keby bolo všetko také ľahké! Bohužiaľ, musíte to urobiť takto:

Okraj: 0 auto; /* 0 - pre hornú a spodnú časť; auto - pre ľavú a pravú stranu */

17. Nezabaľte všetko do DIV

Často je lákavé urobiť niečo ako:

Môže sa to zdať ako dosť dobré riešenie, ale začne to zahlcovať váš štýl. Namiesto toho si to zjednodušte:

Text hlavičky

A pre značku h1 môžete nastaviť akýkoľvek dizajn, ktorý chcete.

18. Použite Firebug

Páčil sa vám materiál a chcete sa poďakovať?
Stačí zdieľať so svojimi priateľmi a kolegami!