Naučte se mluvit „Internet“: Váš průvodce xHTML

reklama

Obsah

§1. Úvod

§2 - Začínáme s xHTML

§3 - Návrh s CSS

§4 - Další informace

1. Úvod: Co je to xHTML?

Vítejte ve světě XHTML - Extensible Hypertext Markup Language - značkovací jazyk (podobný programování), který umožňuje komukoli vytvářet webové stránky s mnoha různými funkcemi. V mnoha ohledech je to primární jazyk internetu.

Tak proč nám to záleží?

No, nechtěli jste někdy mít svůj vlastní web? Nebo si vytvořte vlastní hru? Úlohou této příručky je dát vám chuť tohoto mocného světa. Máte-li nějaké předchozí zkušenosti s programováním, najdete to snadněji, než kdybyste právě začínali s programovacím dobrodružstvím. Ať tak či onak, doufám, že to vysvětlím, takže i nováček to pochopí.

Staráme se o xHTML, protože je to silný výchozí bod k učení základních stavebních kamenů webu. Webové stránky sociálních sítí jako Facebook, MySpace a Twitter používají jiný programovací jazyk (na straně serveru) s názvem PHP, ale je dobré pochopit základy, než se pustíte do programování svět. Tato příručka pojednává o základech.

Pokud se chcete dozvědět více o tom, jak internet funguje nebo snad jak počítačové sítě s tím vším pracují technické věci nebo dokonce to, jak lze počítače sestavit, vyzkoušejte tyto skvělé průvodce od svých přátel MakeUseOf:

//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Jak vytvořit vlastní počítačSestavení vlastního PC je velmi potěšující; stejně jako zastrašující. Ale samotný proces je ve skutečnosti celkem jednoduchý. Provedeme vás ve všem, co potřebujete vědět. Přečtěte si více

//www.makeuseof.com/tag/everything-need-know-home-networking/ Vše, co potřebujete vědět o domácí sítiNastavení domácí sítě není tak těžké, jak si myslíte. Přečtěte si více

//www.makeuseof.com/tag/guide-file-sharing-networks/ Průvodce MakeUseOf pro sítě pro sdílení souborůPřemýšleli jste někdy, jaké jsou tam největší sítě pro sdílení souborů? Jaké jsou rozdíly mezi BitTorrent, Gnutella, eDonkey, Usenet atd.? Přečtěte si více

//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Průvodce Windows 7: Ultimate GuidePokud se bojíte upgradovat z Vista nebo XP, protože máte pocit, že je to úplně jiné, než na co jste zvyklí, měli byste si přečíst tohoto nového průvodce. Přečtěte si více

//www.makeuseof.com/tag/download-how-the-internet-works/ Jak internet fungujeNyní máme přístup k internetu z našich domácích počítačů, kanceláří, notebooků a našich telefonů. Ale mnoho lidí si stále ještě není zcela jistých, co je to internet a jak to skutečně funguje. Přečtěte si více

2. Začínáme s xHTML

V této kapitole se naučíte, jak vytvářet a přizpůsobovat weby mnoha různými způsoby, včetně toho, jak:

• Přidat obrázky na webové stránky.

• Vytvářejte a používejte hypertextové odkazy k procházení webových stránek.

• Nastavit seznamy informací pomocí bodových bodů apod.

• Vytvořit tabulky s řádky a sloupci náhodných dat a být schopen řídit formátování uvedených tabulek.

• Vytvářejte a používejte formuláře, se kterými můžete skutečně komunikovat.

• Zpřístupněte webové stránky vyhledávačům.

To vše se provede pomocí programování xHTML. Tomu nevěříš? Číst dál. Byli byste překvapeni, kolik toho se můžete naučit od tak krátkého průvodce.

Než se skutečně dostaneme do části „kódování“ této příručky, budete potřebovat nějaký software, který budete používat, abyste mohli upravovat, testovat a v podstatě všude kolem rozvíjet své programy. Přejděte na www.dreamspark.com a získejte jeden z následujících programů ZDARMA za předpokladu, že jste student:

• Microsoft Visual Studio 2010

• Expression Studio 4

Pokud nejste student, můžete také použít Poznámkový blok ++, ze kterého se snadno dostanete www.notepad-plus-plus.org

Jakmile získáte jeden z programů a nainstalujete ho, můžete začít s používáním xHTML.

Možná používáte Mac nebo Linux místo Windows; budete muset najít textový editor v tom případě to funguje. Pokuste se najít ten, který vám ukáže počet řádků a barevný kód.

• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - ultralehký textový editor [Linux] Přečtěte si více

• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - skvělý lehký editor kódu pro LinuxLinux překvapivě nenabízí tolik dobrých IDE (Integrated Development Environments). Věřím, že je to proto, že v ten den většina Linuxových programátorů vytáhla dobrý starý Poznámkový blok (nebo v tomto případě gedit) a začala ... Přečtěte si více

Pokud raději nestáhnete žádné specializované nástroje, můžete použít textový editor jako poznámkový blok nebo Wordpad. Výše uvedené programy jsou však mnohem lepšími nástroji pro testování a navrhování a také vám pomohou kódování, protože vás vyzve, pokud uděláte chybu nebo pokud se pokoušíte zapamatovat si správné slovo použití. Jednoduché je lepší, že? Já osobně používám Notepad ++ a Microsoft Visual Studio, i když jsem slyšel mnoho skvělých věcí o Expression Studio 4. Musíte se rozhodnout, co se vám líbí nejlépe, ale všechny fungují dobře.

POZNÁMKA: Testování webových stránek vytvořených z Poznámkového bloku nebo Wordpadu:

Otevřete soubor a klikněte na Soubor >> Uložit jako

Na konci názvu souboru zadejte do.html a klikněte Uložit

Otevřete nově uložený soubor (bude otevřen ve výchozím internetovém prohlížeči)

2.1 Seznámení s „světem“

Dobře, tady je začátek cesty. Začněme tím, že na tuto webovou stránku něco umístíme na obrazovku. Nejprve musíte vědět, co jsou. XHTML kód používá počáteční a koncové značky k vyřešení toho, co se děje s každým prvkem stránky.

Zde je příklad počáteční značky:

Zde je příklad koncové značky:

Vidíš rozdíl? Jeden má název prvku uzavřený v špičatých závorkách a druhý je stejný, ale před názvem prvku je lomítko.

DŮLEŽITÉ: Musíte značku zavřít poté, co ji v nějakém bodě kódu otevřete. Také značky musí být vnořeny, to znamená, že nemůžete dělat následující:; to by mělo být. Podívejte se, jak se značky uvnitř sebe hodí? Přemýšlejte o nich jako o krabicích: do krabice a půl nemůžete dát něco solidního.

Nejlepší způsob, jak poznat, jak programovat, je to, že to skutečně děláte, tak dost teorie. Pro orientaci budu každý řádek kódu označovat číslem, abych mohl řádek po řádku vysvětlit, co se děje.

V řádku 1 jsem uvedl html kód a v řádku 5 jsem jej ukončil. Uvnitř značka je

, a uvnitř existuje odstavec (řádek 3,

). Pokud to otevřete ve webovém prohlížeči, uvidíte na obrazovce následující:

Pokud chcete změnit název stránky z pohledu prohlížeče (např. firstpage.html) pak můžete snadno přidat následující řádek kódu:

Díky tomu bude vaše webová stránka vypadat profesionálněji.

2.2 Počínaje a pracuje dolů

Ve většině případů uvnitř značka existuje

a .
je obvykle používán pro skriptování v CSS (část 3) a JavaScript (vysvětleno v připravované příručce), zatímco je obvykle obsah stránky.

Některý obsah lze změnit pomocí skriptování v

, ale je obvykle obsah, který je na stránce neměnný. Příkladem by mohla být krátká hra o webu, který navštěvujete.

Můžete změnit formátování obsahu pomocí CSS (část 3) v

. Můžete však také změnit formátování v .
Běžně používanou sadou značek používaných v těle jsou písma záhlaví. Tato písma záhlaví se pohybují ve velikosti, síle / tučnosti. Jen se podívejte sami níže:

2.3 Stojí vaše fotka za tisíc slov? - Snímky

Až dosud jsme mluvili pouze o textu a o tom, co může na webových stránkách udělat, ale je toho ještě víc. Chcete, aby váš web vypadal ještě lákavěji než jen ozdobná písma? Pokuste se získat nějaké dobré obrázky, díky nimž se vám web opravdu dá publiku na co se podívat. Pozor na zákony o autorských právech; nejlépe si udělejte vlastní obrázky, pokud hodláte svůj web umístit na internet.

Možná budete muset použít Photoshop nebo nějaké dovednosti digitálního zobrazování, abyste vytvořili skvělý obrázek nebo možná vylepšili svůj vlastní obrázek a udělali to ještě úžasnějším. Vyzkoušejte tyto průvodce, kde najdete několik skvělých tipů a informací:

• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Naučte se upravovat fotografie ve Photoshopu: Získejte základy dolů za 1 hodinuPhotoshop je zastrašující program - ale za jednu hodinu se můžete naučit všechny základy. Pořiďte fotografii, kterou chcete upravit, a začněme! Přečtěte si více

• //www.makeuseof.com/tag/guide-to-digital-photography/ Průvodce digitálním fotografováním pro začátečníkyDigitální fotografie je skvělý koníček, ale také to může být zastrašující. Tato příručka pro začátečníky vám řekne vše, co potřebujete vědět, abyste mohli začít! Přečtěte si více

Nejpopulárnější formáty obrázků jsou následující:

• GIF = Graphics Interchange Format

• JPEG = Joint Photographic Experts Group

• PNG = Portable Network Graphics

Podívejte se na níže uvedený kód a vysvětlím, co to znamená; to je, jak přidat obrázky na svou webovou stránku.


Jak bylo učeno v předchozích sekcích, vždy začínáme s a co tagy. Další

značka je otevřena v řádku 5. Pojďme jen přeskočit k důležitým věcem…

Po otevření odstavce v řádku 9 se zde vkládají obrázky na webovou stránku. Chcete-li přidat obrázek / obrázek, měli byste použít začít. Dále musíte navrhnout, kde se soubor nachází. Obvykle byste se pokusili mít tento soubor ve stejné složce jako soubory webových stránek, jinak budete muset zadat cestu ke složce, ve které existuje. Ve výše uvedeném případě jsem použil . To znamená, že zdroj (src) obrázku se nachází ve stejné složce a název souboru obrázku je Picture.jpg. Snadno?

Nemusíte přidávat nic víc než vytvořit obrázek pomocí alt Vlastnost, ale můžete do ní přidat vlastnosti a provést v ní určité změny.

Také známý jako alt text, tato hodnota vlastnosti se zobrazí, když umístíte kurzor myši na obrázek.

Možná si všimnete, že v řádku 10 jsem začal s tagem a ukončil to />. Toto je další způsob otevírání a zavírání značek. Toto je obvyklý způsob vytváření obrázků, protože si můžete vybrat různé vlastnosti obrázku, jako je šířka a výška, jak je uvedeno v příkladu výše.

V řádcích 11 a 12 je vložen další obrázek, ale to je pomocí jiné metody pro otevírání a zavírání značek. Řádek 10 vytváří obraz mnohem elegantnějším způsobem; použijte spíše než metodu v řádcích 11 a 12.

2.4 Hypertextové odkazy, kam mohou jít?

2.4.1 Pohybovat se po „světě“

Chcete svým přátelům ukázat pár skvělých webů, ale nevíte jak? Přišli jste na správné místo, přečtěte si ...

Prohlédněte si níže uvedený kód a ujistěte se, zda můžete uhodnout, co dělám, než to vysvětlím.

Správně, vytvářím hypertextové odkazy na některé skvělé a užitečné stránky. V zásadě k hypertextovému odkazu na určitou webovou stránku, která má webovou adresu, jednoduše použijete níže uvedenou syntaxi:

[co chcete hypertextový odkaz]

Nezdá se, že je to velmi obtížné? Dalo by se docela snadno do něj vložit text, jako je výše uvedený příklad. Neexistuje však žádný důvod, proč byste nemohli použít něco jiného, ​​jako je obrázek. Jen pro trochu dalších informací: URL je Uniform Resource Locator, v podstatě webová adresa.

2.4.2 Obrázky vám připomínají, kde jste byli, a znovu vás tam zavedou

Zde je příklad použití obrázku jako hypertextového odkazu:

Jsem si jistý, že jste si přečetli předchozí části této sekce, které vydáváte, že to jednoduše míchá vytváření obrázků a hypertextových odkazů. Syntaxe je nastavena tak, aby měla hypertextový odkaz na vnější straně a obraz na vnitřní straně, čímž se umístí hypertextový odkaz na vložený obrázek.

2.4.3 Máte poštu - Hyperlinking na e-mailovou adresu

Jde pouze o opakování poslední části, ale pokud jste nevěnovali pozornost, podívejte se na níže uvedený kód:

Namísto použití adresy URL (např. http://www.something.com) zde používám e-mailovou adresu, která zahrnuje vložení následující syntaxe za znaménko rovnosti:

„Mailto: [youremailaddress]“

Linka 10 je základním příkladem tohoto konceptu. Kdo tedy pošlete e-mail? Krotitelé duchů!

2.4.4 Cesta kolem světa - interní hypertextové odkazy

Nyní můžete vidět, jak byste se dostali kolem svého vlastního webu. To se provádí jednoduše pomocí názvu souboru jako adresy URL. Proto můžete mít zřízené webové stránky, jak je znázorněno na obrázku níže. Syntaxe, kterou byste použili, by měla něco podobného:

Další strana

2.5 Jste zvláštní? Tyto postavy jsou…

Když zadáte informace, které se na webu objeví, jako je například obsah, bude pravděpodobně nutné vložte něco jako symbol, například symbol autorských práv: © nebo možná méně než nebo větší než symbol. Ale protože normální symboly jsou používány kódovací syntaxí, pak musel existovat jiný způsob, jak se dostat přes tuto malou překážkou a řešením bylo použití ampersandu (&) a poté krátkého kódu, aby počítač sdělil, jaký symbol dát dovnitř Níže je tabulka s několika příklady speciálních znaků z kódování:

Můžete například říci:

Ve výše uvedené tabulce je 2 řádky

Ve výše uvedené tabulce je <6 řádků, ale> 2 řádky

2.6 Seznamy, seznamy a další seznamy

Dobře, teď budeme muset uspořádat pár věcí, například nákupní seznam. Existují dva typy seznamů. Jsou to:

• Seznam objednávek (čísla, abecedy, římské číslice)

• Neuspořádaný seznam (odrážky)

Pro seřazený seznam byste použili následující značky

Pro neuspořádaný seznam byste použili následující značky

Například:

Ve výše uvedeném příkladu jsem zahrnoval neuspořádané i uspořádané typy seznamů. Ale všimli jste si, co jiného jsem udělal? Také jsem zahrnul techniku ​​zvanou Vnořené seznamy. Tyto vnořené seznamy lze použít k reprezentaci hierarchických vztahů, jako je seznam složek v Získejte ingredience krok receptury výše.

Můžete vidět, že jsem celý seznam začal jako řádek v řádku 10 a dokončil jej v řádku 23. Mezi tím byste viděli a tagy, které jsem použil. Tyto označují Seznam položek. Položky seznamu jsou slova, která se zobrazí například v řádku 21:

Vaříme omáčku

. Slova Vaříme omáčku se zobrazí vedle čísla 5, protože se jedná o pátou položku seznamu v uspořádaném seznamu.

Pokud chcete přejít na další hierarchickou úroveň tečkových bodů nebo čísel, vnořte se do sebe takto:

2.7 Tabulky… ne matematika

Je to stejně obtížné jako vaše multiplikační tabulky? Samozřejmě že ne, pokud o tom půjdete správnou cestou. Pokud právě začínáte s tímto konceptem a domnívám se, že ano, pak je obvykle nejlepší nakreslit stůl, který chcete vyrobit, na kus papíru, jaký mám níže:

Nyní se na to podívejte v níže uvedeném kódu:

Nyní je smíchejte a displej níže by vám měl pomoci pochopit strukturu tabulky:

A

nebo mnoho tabulek může být také užitečné jako rámečky na webových stránkách, jeden pro nabídku, jeden pro obsah a druhý pro záhlaví.

a

tučně v prvním a posledním řádku, aby se více upoutalo na tyto části stolu. Většina lidí by se na celkovou částku v zápatí stolu nejprve dívala, že?

jsou data tabulky v řádcích tabulky.

je řádek tabulky, který začíná a končí na každém řádku kódu pro čistotu. je dobré se ujistit, že vaše tabulka není jen svazek informací, aniž by existoval důvod.

2.8 Digitální formuláře (pera pryč)

Při surfování po síti budete muset komunikovat s webovými stránkami, na které narazíte. Například na www.makeuseof.com budete muset zadat svou e-mailovou adresu, jak je uvedeno níže přihlaste se k odběru novinek a denních aktualizací od MakeUseOf. Po zadání své e-mailové adresy vás stiskne Připojit a to by odeslalo informace (váš e-mail) do textového pole vedle tlačítka buď do databáze, nebo možná na jinou e-mailovou adresu. formuláře jsou zvyklí na to, co se naučíte v této kapitole.

Níže je formulář, který se používá k vložení vašeho jména a kliknutí na jeden z nich Předložit nebo Průhledná:

Zde je kód ze zákulisí, který to v krátkosti vysvětlím:

Nejdůležitější věcí ve výše uvedeném skriptu je řádek 10. Toto je začátek formuláře. Metoda je obvykle buď pošta nebo dostat. Docela samozřejmý, ale pošta odesílá informace někde, aby vytvořila záznam, například e-mailovou adresu nebo databázi. Například: zveřejnění otázky na odpovědi MakeUseOf. Dostat, na druhé straně odešle vámi poskytnuté informace a vrátí se s informacemi o zpětné vazbě, jako je vyhledávač, zaslání vyhledávacích klíčových slov a vrácení s výsledky.

Výše uvedený kódovací blok je příkladem poštovního formuláře, ve kterém byste zadali svou e-mailovou adresu a po kliknutí na tlačítko Odeslat by byl odeslán do skryté vlastnosti s e-mailovou adresou. tag v řádcích 19-21 vytvoří textové pole na stránce a poskytne mu maximální počet znaků, které lze v tomto poli použít.

Řádky 22 - 25 umístí tlačítka Odeslat a Reset / Vymazat na stránku pod textové pole. Resetovat tlačítko jednoduše odstraní veškerý text zadaný do textového pole nebo polí v tomto formuláři. Předložit tlačítko následuje pokyny ze skrytých částí formuláře, které jsou vytvořeny v řádcích 14 - 18. Skrytý typ by obvykle předpokládal, že v aktuální podobě bude použito něco automatického nebo část něčeho jiného. V tomto případě je to druhá poštaed informace, cíl, v tomto případě [email protected], s nastaveným předmětem, v tomto případ „Přihlásit se k odběru e-mailu“ a poté vás přesměruje na jinou stránku, v tomto případě na hlavní stránku nebo „Index.html“.

2,9 meta co? Proč?

Přemýšleli jste někdy, jak vyhledávače vyhledávají webové stránky? V zásadě to je to, co používají: meta prvky. Vyhledávače obvykle katalogizují weby podle odkazů na stránky na stránkách, které najdou. Tyto prvky meta obsahují informace o stránce. Podívejte se například na následující výpis z nějakého kódu:

Jak můžete vidět výše, meta informace jde do

tag a má typy: klíčová slova a popis. Obsah je další částí meta informací, kterými jsou buď klíčová slova, nebo popis, jak je uvedeno v příkladu.

3. Design s CSS

Většinu času se lidé, kteří se dívají na takovéto průvodce, prostě baví hrát videohry. CSS však není zdrojem Counter Strike Source a vůbec to není střílečka z pohledu první osoby (FPS). CSS je technologie, která pracuje s xHTML a znamená Cascading Style Sheets. xHTML je docela nuda sama o sobě, ale pokud přidáte spravedlivé podávání CSS, je formátování a prezentace vaší tvorby mnohem zajímavější. Autoři mohou provádět změny prvků na webové stránce, jako jsou písma, mezery, barvy; to se provádí odděleně od struktury dokumentu (hlava, tělo atd.; to bude vysvětleno v dalších kapitolách). xHTML byl ve skutečnosti navržen tak, aby specifikoval obsah a strukturu dokumentu. Není to jako by xHTML nemohl změnit formátování obsahu. Toto nastavení je však mnohem výhodnější, protože v případě potřeby může být ovládáno z jednoho místa. Pokud je například formát webu určen výhradně přiloženým listem stylů, může webový designér jednoduše zavést další list stylů, který výrazně změní prezentaci webu.

3.1 Styly Inline Dancing

Jak je uvedeno výše, tato část se týká formátování a stylů. Protože existuje mnoho způsobů, jak změnit styl vašeho obsahu a stránky, domníval jsem se, že by bylo dobré začít s nejpřímější technikou, která je Vložené styly. To se provádí umístěním kódu do části vlastností na kartě, která obsahuje obsah. Takhle:

Zní to příliš obtížně? Dovolte mi uvést příklad:


Poznámka: Barva je hláskována barva při použití tohoto kódu, protože byl vytvořen někde ne tak cool jako Austrálie nebo Kanada; Doufám, že vás to příliš nevadí.

Tučně vyznačená informace ve výše uvedeném příkladu je formátování, které se zpracovává na obsahu zahrnutém v

štítek. Seznam hexadecimálních kódů pro různé barvy jednoduše vyhledejte na Googlu nebo použijte tento web: http://html-color- kódy.com/

3.2 Vestavěné stylové listy (Cheat Sheets vyhrávají)

Použití inline stylů v předchozí části může být bolest, pokud máte velmi velké stránky. Ale pokud chcete používat stejné styly znovu a znovu, tak proč nepoužívat Vložený styl? Tato alternativa vám umožní vytvořit si vlastní styly

značku kódu a poté na ně v kódu odkazujete, když na stránku vložíte nějaký obsah. Příliš komplikované? Zde je příklad:


Podívejte se, jak text mění barvu, velikost nebo formát v závislosti na šabloně stylů nahoře? Tohle není těžké pochopit, že?

V řádku 7, kde představujeme začátek značka s typem: text / css nazývá se to typ MIME (Multipurpose Internet Mail Extensions), který popisuje obsah existující v dané značce / souboru. Dokumenty CSS vždy používají text MIME text / css. Javascript, který bude popsán v jiném svazku této příručky, používá text / javascript Typ MIME. Existuje mnoho různých typů MIME, ale ty hlavní jsou Javascript a CSS.

Řádek 16 používá .xtra třída, která byla vytvořena dříve. Způsob, jakým to funguje, je, že se přidá na xtra třídy bez ohledu na styl, na kterém je otevřen, čímž přepíše všechny vlastnosti, které xtra použití třídy. Například: má-li styl velikost písma 20pt a je barva zelená a na něj je vložena třída, která má a jiné velikosti písma nahradí původní velikost nové, ale zelená barva bude pokračovat jak je.

3.3 Styly ve válce (konfliktní styly)

Existují tři úrovně stylů a jsou:

• Uživatel (prohlížení webu)

• Autor (z webu)

• User Agent (prohlížeč)

Styly se spojí takovým způsobem, který vytváří nejlepší možné nastavení z pozice uživatele. Následující graf ukazuje hierarchii tří úrovní:

3.4 Stylové tabulky zezadu (externí)

Nemyslíte si, že by bylo nepříjemné, kdybyste museli v každém novém kódovacím souboru psát vždy stejný list stylů? Existuje řešení: Vnější styly. Můžete vytvořit další soubor za účelem jeho použití pro formátování; to je ".css“. Chcete-li jej použít v jiném souboru, jednoduše zadejte následující výpis:

Nahradit název souboru s názvem vašeho souboru CSS a tam jdeme, jsou propojeny. Ujistěte se, že váš soubor CSS je ve stejné složce jako propojené soubory.
Ukázkový soubor CSS:

Než budeme pokračovat, opomněl jsem zmínit, co em dělá. Nad posledním řádkem uvidíte, že jsem dal „ul ul {font-size: .8em; } “A to znamená, že velikost písma se změní na relativní .8 nebo 80% normální velikosti, kterou chce uživatel, aby používal svůj vlastní styl stylů načten do svého prohlížeče. Většina lidí nepoužívá šablonu stylů definovanou uživatelem, takže si s tím nedělejme starosti.

3.5 Polohovací prvky (kam dále?)

Když umístíte obrázek na webovou stránku, nechcete, aby to šlo kamkoli. Nechtěli byste mít v tom slovo? Takhle to děláte, je to vlastně příklad a brzy to vysvětlím:

V řádcích 9 až 13 si všimnete, že se jedná o třídu s ID jako fgpic a má v něm několik vlastností. pozice vlastnost je nastavena na absolutní což znamená, že bez ohledu na to, jak jej uživatel změní, obrázek zůstane tam, kde jej (autor) umístí spolu s kódem. horní a vlevo, odjet vlastnosti označují bod, ve kterém prvek (např. obrázek / text). z-index vlastnost je velmi výkonný nástroj, protože nastavuje úroveň stohování, jak je ukázáno na obrázku níže:

Podívejte se, jak je obrázek na pozadí vzadu s hodnotou z-index 1 a text je vpředu s hodnotou z-index 3, zatímco obrázek v popředí je uprostřed s hodnotou z-index 2. Vypadá to docela dobře, pokud hrajete karty správně

3.6 Poznejte své okolí (pozadí)

Webové stránky vypadají dobře s pozadím, že? Nebylo by opravdu nudné, kdyby všechny webové stránky měly jen bílé nebo černé pozadí? Proč tam nevkládat obrázek a trochu změnit barvu? Existuje několik vlastností, které můžete použít k tomu, aby pozadí vaší stránky vyčnívalo o něco více a dalo stránce nějakou světlici. Podívejte se na následující kód a zjistěte, zda můžete zjistit, co zvýrazněné vlastnosti dělají:

Vypracovali jste, co to dělá? V zásadě je obrázek na pozadí to, co se chystáme použít na pozadí, cesta obrázku jde do závorek / závorek, jako je tento> url (TADY). Můžete si to myslet jako s hodnotou z-index 0, protože je vždy na samém konci stránky. Pozice obrázku na pozadí byla nastavena vlevo dole, docela dobře vysvětlující, že? Dále byl obrázek na pozadí opakován napříč osou x stránky (opakování-x) a nejen to, ale je fixováno i na spodní část okna (příloha na pozadí). Nakonec byla barva náhodně nastavena především na červenou. Podívejte se na výsledek níže:

3.7 Jak velký si myslíte? (rozměry prvků / textové limity)

Pokud si myslíte, že vše, co nabízí CSS, se mýlíte. Pravidla CSS mohou specifikovat skutečné rozměry každého prvku stránky. Vezměme si příklad textového pole. Chcete napsat nějaký text, který neprochází celou obrazovkou, nebo možná vytvoříte textové pole, které lze posouvat bez pohybu stránky? Tady byste měli být. Na níže uvedeném snímku obrazovky najdete to, co jsem právě popsal:

Nyní se podívejme na kód v zákulisí:

Jen malá poznámka: řádek 6 přidává okrajové ohraničení na spodní část každého textového pole. Docela v pohodě, že? Ale více o hranicích v další sekci.

3.8 Co se děje kolem (hranice)

Nemyslím si, že to potřebuje vysvětlení, ale stejně to dám. V podstatě můžete ohraničit hranice téměř cokoli, takže se podívejme, jak to udělat. Tady je kód:

Tady je to, co kód dělá, v podstatě sortiment hranic obklopujících název / názvy použitého typu hranice. Mějte na paměti, že opak drážky je vyvýšenina a opak vložky je na počátku.

3.9 Plovoucí a tekoucí prvky

Obvykle je docela nudné vidět pouze nadpis, pak text, pak nadpis a text. I když to nechce vypadat trochu hezčí? Existuje metoda, kterou lze použít plovoucí, a teď vám ukážu, jak to udělat. Plovoucí umožňuje přesunout prvek na jednu stranu obrazovky, zatímco další obsah v dokumentu pak teče kolem plovoucího prvku. Plovoucím prvkem může být obrázek nebo nadpis nebo i další blok textu. Nyní se podívejme, jak to vypadá:

Docela dobré pro několik situací, nyní je to kód, který konstruuje tento design:

Není to úžasné, co můžete dělat, když najdete správnou metodu?

3.10 Nenechte rozevírací nabídku - příklad

Pokud uvažujete o vytvoření webu, budete s největší pravděpodobností potřebovat nabídku, ne? No, tohle může být to pravé místo, kam jít, pokud chcete něco, co tam jen tak nesedí. Dynamické prvky umožňují, aby webové stránky vypadaly lépe a celkově poskytovaly lepší dojem.

Jeden z mých oblíbených typů menu musí být rozbalovací nabídka Nyní se tedy podívejme, jak si jednu vyrobit pomocí CSS. Podívejte se na níže uvedený kód:

Vím, že se to na první pohled zdá trochu skličující, ale pokud jste trpěliví a jen si přečtete, pochopíte to brzy.

Řádek 15 říká: když mám <div> tag with class = “Jídelní lístek“A myš je vznášet senad tím Zobrazit blokje uvnitř.

Řádky 16-21 říkají: když mám <div> tag with class = “Jídelní lístek“A <A> tag pak nastavte tyto formáty. Mějte na paměti, že tyto řádky volí formát skrytých tlačítek nabídky. Řádky 9-14 nastavují formáty, ve kterých se tlačítko nabídky posouvá a zobrazí se zbytek nabídky.

Řádek 22 říká: když mám <div> tag with class = “Jídelní lístek“A <A> tag a já vznášet se přes jeden z těchto prvků pak nastavte barva pozadí na jinou zelenou.

Podívejte se níže na finální produkt:

3.11 Uživatelské styly (jste středem vesmíru)

Uživatelé si mohou definovat své vlastní uživatelské styly aby stránky vypadaly tak, jak chtějí. Jen pro rozlišení mezi Uživatelské styly a Autor Style Sheets. Uživatelské styly jsou externí šablony stylů, které si uživatelé mohou sami vytvořit, a to jednoduše jako soubory CSS bez většiny kódování. Zde vám ukážu jeden:

Nebylo to extrémně jednoduché?

Pokud chcete vědět, jak to nastavit ve svém vlastním prohlížeči, jednoduše byste jeli na Nástroje >> Možnosti Internetu >> Obecné >> Přístupnost >> Pak definujte svůj vlastní soubor Autorský styl je definován uvnitř kódu mezi tím .

4. Více informací

4.1 Proč používat xHTML a co. nad designem a dalšími aplikacemi?

Než se na to podíváte jako na fakt nebo něco podobného, ​​měli byste vědět, že je to prostě pohled v závislosti na tom, kde stojíte a jak technicky smýšlíte. Baví mě používat programovací jazyky k dokončení svých projektů, protože to znamená, že rozumíte tomu, co je za návrhy, zatímco pomocí návrhářských aplikací, jako je Adobe Dreamweaver a Microsoft FrontPage vám umožní vytvořit web pomocí pouze nástrojů dostupných v nabídkách. Proto jsou návrhové aplikace omezeny na možnost nabídky, která vám byla poskytnuta. Závěrem je zcela zřejmé, že použití programovacích jazyků by webové stránky nebo hotový produkt zabudovalo něco mnohem přitažlivějšího, protože jeho funkčnost je omezena pouze dovedností programátora s určeným jazykem (např. JavaScript, CSS, xHTML). Vím, že si pravděpodobně myslíte, že jsem zkreslený, ale budete muset jen vyzkoušet oba a rozhodnout se jak hodně úsilí, které chcete věnovat své práci, pak zvolte vhodné nástroje, které vám pomohou destinace. Můžete dokonce zvolit použití obou, protože Dreamweaver i FrontPage mají „kódovací zobrazení“ a „návrhové zobrazení“.

Existují i ​​jiné způsoby, jak vytvořit webové stránky, například pomocí Joomla a WordPress.

4,2 Joomla

Joomla je skvělý systém pro správu obsahu (CMS) se spoustou flexibility a snadno použitelným uživatelem rozhraní, které spousta lidí zastraší, když si uvědomí, kolik možností a konfigurací je k dispozici. Joomla je platforma založená na PHP a MySQL. Tento software je open-source, ze kterého můžete získat http://www.joomla.org/download.html

Pokud chcete v podrobném průvodci Joomlou, zkuste tento průvodce od MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Průvodce pro začátečníky po JoomleTato příručka vás provede všeho, od čeho si vybrat Joomla a jak jej nainstalovat na svůj webový server, až po návrh a přizpůsobení webu podle vašich představ. Přečtěte si více

4.3 WordPress

WordPress je systém pro správu obsahu (CMS), který uživatelům umožňuje vytvářet a udržovat web pomocí správy rozhraní, včetně automaticky generované navigační struktury, bez nutnosti znát HTML nebo se učit jakýkoli jiný nástroj. WordPress je část softwaru s otevřeným zdrojovým kódem, který vytvořily tisíce programátorů po celém světě a který je veřejně přístupný, takže za jeho používání nemusíte platit. WordPress je webová aplikace napsaná v PHP a MySQL, navržená pro provoz na serverech Linux: PHP je programovací jazyk pro web aplikací, MySQL je relační databáze (jako je MS Access) a Linux je operační systém pro webové servery - všechny jsou také otevřené zdroj. WordPress je zdaleka nejoblíbenější CMS s více než 200 miliony webů na konci roku 2009.

Další čtení

• Top 11 značek HTML, které musí znát každý majitel blogu a webu Top 11 značek HTML, které musí znát každý majitel blogu a webuCelosvětový web zná mnoho jazyků a je kódován v několika různých jazycích. Jediným jazykem, který lze najít všude a existuje již od vynálezu webových stránek, je ... Přečtěte si více
• 5 zábavných věcí online s HTML5 5 zábavných věcí online s HTML5HTML5 stále přechází ze síly na sílu a další weby přecházejí na nový standard, který přináší multimediální obsah na web bez nutnosti doplňků, jako je Adobe Flash. Je to vystřeleno ... Přečtěte si více
• Kód pro web s těmito nástroji přímo v prohlížeči Sestavte: 11 skvělých rozšíření Chrome pro vývojáře webuChrome je skvělý pro webové vývojáře, protože má řadu rozšíření. Pokud máte v úmyslu navrhnout nebo kódovat web, zde je několik základních nástrojů, které byste měli okamžitě nainstalovat. Přečtěte si více

Průvodce publikován: červen 2011