Ako vytvoriť web, časť 2, kompletný web od 0 v HTML, CSS s galériou obrázkov - videonávod

Tento výukový program opisuje stránky pomocou HTML a CSS, ktoré pokrývajú všetky fázy: vývoj webových stránok,
vytvorenie účtu na voľnom hosting a nakoniec nahrávanie súborov na našich webových stránkach o tom hosting, zadarmo hosting je rýchly spôsob uvedenie internetovej stránky náš on-line v priebehu niekoľkých minút, nevýhodou tejto metódy je, že budeme mať nejaké reklamy zobrazujú po celú dobu v hornej časti (záhlavie vyššie).

Každý, kto chce otvoriť webové stránky, musíte vedieť, HTML a CSS, nemusí byť odborníkom v HTML (HYPER Text MArkupe Lúzkosť), ale niektoré informácie o kóde sú absolútne nevyhnutné na pochopenie toho, ako tieto veci fungujú.

Dokonca aj keď budete stavať jedno miesto, stále máte mať žiadnu predstavu o tom, čo sa deje prostredníctvom týchto súborov bude vyžadovať pravidelné nápravu chýb alebo dosiahnutie zmien.

Mnoho ľudí uteká z kódu, mnohí prirovnávajú kód k hieroglyfom, vôbec to tak nie je, niekto raz povedal: „KÓD JE POETRIA“, mal pravdu, keď vidíš, že sa niečo rodí zo série riadkov kódu, cítiš sa úžasne, staviaš si virtuálny svet iba s klávesnicou a myšou.

Aplikácie postavené softvérovými spoločnosťami sme už dlho používali, robili sme iba prácu s počítačom, je čas robiť programovanie, v skutočnosti to nie je programovací jazyk, je to „značkovací jazyk“, ale budeme odkazovať na je to ako programovací jazyk, pretože to znie dosť čudne, „značkovací jazyk“, HTML je jedným z najjednoduchších programovacích jazykov (značkovania), aký sa dnes používa, vidíme HTML na akomkoľvek webe, veľa softvéru má v sú súčasťou HTML, tento programovací jazyk je všade, je čas sa ho naučiť.

Pri prvom spustení môže byť menej skľučujúca, ale ak ste opatrní, než budete okamžite pochopí, že nie všetko je tak ťažké, sú jednoduché a krásne veci, sme vytvoriť niečo s rukou, to je tá najdôležitejšia vec.

Budeme sa naučia základy, potom sa učíme, ako zadávať text na webovej stránke, potom zaistíme a farbu textu, používame strana v štýle CSS (kaskádových štýlov), s ktorým budeme umiestniť všetky prvky stránky HTML vôbec, takže si bude klásť na našich webových stránkach je vyrobený, aby vyzeral ako jeden kus.

Naučíte sa jednoduché techniky, základné HTML a CSS, aj keď to sú základné veci v HTML a CSS, vytvorí prehľad príjemné.

Z tohto výukového programu je nutné vyzbrojiť pozornosť a trpezlivosť, táto výučba nie je niečo, čo si môžeme dovoliť prevádzkovať len málo, ak rolovacích behom niekoľkých sekúnd môžete tak prísť o niečo veľmi dôležité a uvidíte, potom už nie zmysel, koncentrácia informácia je extrémne vysoká, a to je dôvod, prečo som vás požiadať, aby ste byť veľmi, veľmi opatrný.

Po tomto výukovom programe, a to aj intenzívneho kurzu, povedal by som, budete mať lepšiu predstavu o tom, čo HTML a CSS, môžete tiež kontrolovať kód a ste plne porozumeli HTML dokument s pocitom, že HTML je nielen rad heroglife rozptýli, viete, čo to je, keď sa pozrieme na jeden HTML alebo CSS.

Dozvieme sa o štítky (tagy), tu máme niekoľko príkladov značiek (tagov), ktoré môžete použiť v dokumente HTML, nebojte, nemusíte sa im pamätať všetko, čo potrebujete naučiť len základy v prvej tabuľke zvyšok možno nájsť tu na stránkach alebo na internete, keď ich potrebujete.

Dokonca aj stoly sú usporiadané tieto značky sú vyrobené pomocou HTML.

Základné elementy (tagy).

Definuje formát súboru web
header dokument
Tilul dokument
HTML stránka telo
BGCOLOR = Farba Farba pozadia stránky
TEXT =Farba Farba textu na stránke
LINK =Farba Unvisited odkaz farebné strany
vlink =Farba Navštívil farba odkaz na stránku
Alinka =Farba Farba odkazu v užívateľskom kliknutí exacutat
Doterajší stav = url Stránka obrázok na pozadí
odsek
<Hn> <Hn> Podtitul úrovni dokumentov (n = 1-6)
Špecifické atribúty zarámovaný texte
SIZE =n Veľkosť textu je 1 7,
FACE ="A, b" Určite písmo: aAk je k dispozícii, alebo b
COLOR =s Farba textu: buď názov farby alebo hodnoty RGB
nový riadok
informácie o naformátovaný
HTML Comenatriu
Materiál centier v strane
horizontálne pravítko
SIZE =x Výška pravítko v pixeloch
WIDTH =x Šírka pravítko v pixeloch alebo percentách
noshade Zakázať zobrazenie tieňa pre vodorovného pravítka
align =x Vyrovnanie vodorovné pravítko na stránku (vľavo, na stred, vpravo)
COLOR =x Farba horizontálne pravítko (iba prehliadač IE)
mark kotva
href =url referenčnej hypertext
href =#NAME Odkaz na vnútornej kotvu
name =názov Definícia vnútorných kotiev

Položky do zoznamov .

popis definície
Definícia typu Zoznam
V rámci definície
zoznam funkcií
<OL Zoradený zoznam (číslovaný)
TYPE =typ Číslovanie. Možné hodnoty: A, A, I, i, 1
START =x Počet začatých zoradení zoznamu
<UL Jednoduchý zoznam (označený)
TYPE =formulár Formulár záložky. Možné hodnoty: kruh, štvorec, disk.

formátovanie charakter prvky .

Vkladanie textu tučne
Vkladanie textu kurzívou
Pasta zvýraznený text
neproporcionálne písmo
citácie bibliogarfica
výpis Program
Štýl zvýraznenie logika
klávesnica Text
Zvýraznenie silnú logiku
Program alebo variabilné
<BASEFONT SIZE = n> Určuje predvolenú veľkosť písma stránky

Prvky pre rámy .

Definovanie písanie stránku
COLS =x Počet a relatívna veľkosť stĺpcov
ROWS =x Počet a relatívna veľkosť linky
border =x Určuje stav „zapnuté“ alebo „vypnuté“ pre snímku FRAMESET (1 alebo 0)
frameborder = x Udáva veľkosť rámčeka
FRAMESPACING = x Množstvo miesta medzi dvoma susednými rámami
Definícia určitého snímky
SRC =url URL zdroja k rámu
NAME =názov Názov rámca (používa sa v spojení s TARGET = názov ako súčasť kotevnej značky
posúvanie =SCRL Definovať voľba bar derulare.Valori možné: ON (aktívne), off (neaktívny): Auto (automatický)
frameborder =x Veľkosť hranicu okolo rámu
marginheight =x Zvláštne priestor nad a pod určitú rámca
marginwidth =x Suplimetar priestoru vľavo a vpravo pre špecifický
Sekcia stránky zobrazí používateľom, ktorí nemôžu vidieť rámček
Framework (iba (IE)
SRC =url zdroj frame
NAME =s Meno okno (užitočné pre TARGET)
HEIGHT =x Embedded výška rámu
WIDTH =x Embedded šírka rámu

Prvky pre stoly .

HTML tabuľky
border =x table border
Vnútorný okraj buniek =x Zvláštne priestor v bunkách tabuľky
cellspacing =x Zvláštne priestor medzi bunkami tabuľky
WIDTH =x Uložila šírka stola
FRAME =hodnota Jemné nastavenie tabuľky
PRAVIDLÁ =hodnota Pravítka jemné prestavenie stola
bordercolor = Farba Špecifikácie Farba orámovania tabuľky
BORDERCOLORLIGHT = Farba Svetlejšia farba dvoch farieb uvedené
BORDERCOLORDARK = Farba Tmavšia farba dvoch farieb uvedené
align =ľavý Zarovná tabuľku k ľavému okraju stránky a text tečie pravú stranu
align =presne Zarovná tabuľku k pravému okraju stránky a text tečie doľava
hspace =x Suplimetar horizontálny priestor okolo stola
vspace =x Suplimetar vertikálny priestor okolo stola
COLS =x Určuje počet stĺpcov tabuľky
Definuje množinu definícií stĺpcov pomocou značiek
<COL WIDTH =x> Definuje šírku stĺpca v pixeloch
Definuje záhlavie tabuľky
Definuje telo tabuľky
riadok tabuľky
BGCOLOR =Farba Určuje farbu pozadia pre celý riadok
align =zarovnanie zarovnanie bunka na aktuálnom riadku (vľavo, na stred, vpravo)
Dátové bunky tabuľky
BGCOLOR =Farba Určuje farbu pozadia pre dáta buniek
colspan =x Počet stĺpcov, ktoré sa vzťahuje na aktuálne dátová bunka
rowspan =x Počet riadkov, tiahnuci sa existujúce dátové bunka
align =zarovnanie Vyrovnanie štruktúru bunky date.Valori možné: (vľavo, vpravo, v strede)
valign =zarovnanie Zvislé zarovnanie materiálu z bunky date.Valori možné: (hore, dole, uprostred)
Doterajší stav =url Určuje obraz pozadia pre bunky tabuľky
nowrap Neumožňujú štiepanie riadkov textu v bunke
align =základné Zarovnať dátové bunky so základnou líniou susedného texte
align =znak Zarovná stĺpec na konkrétny znak (predvolený znak je „.“)
align =zdôvodniť Porovnajte oba ľavý okraj a pravý okraj textu

Položky pre pridávanie obrázkov.

<IMG Označenie vstupné obrazy
SRC =url grafický Zdrojový súbor
ALT =text Alternatívny text, ktorý sa zobrazí, ak je to nutné
align =zarovnanie Vyrovnanie obrazu na stránke. Možné hodnoty: top (hore), stredná (uprostred), spodná (pozri nižšie), vľavo (vľavo), vpravo (vpravo)
HEIGHT =x Výška obrazu (v pixeloch)
WIDTH =x šírka obrázku
border =x Rámček okolo obrazu, ak sa používa ako hypertextové odkazy
hspace =x Priestor okolo obrazu horizontálne (v pixeloch)
vspace =x Priestor okolo obrazu vertikálne (v pixeloch)

Forms prvky.

Aktívne forma HTML
action =url CGI program na serveri, ktorý prijíma dáta
method =metóda Ako sú prenášané dáta na server (GET alebo POST)
<INPUT Camp textu alebo iné vstupné údaje
TYPE =voľba Typ vstupného poľa . Možné hodnoty: text, heslo, začiarkavacie políčko, skryté, súbor,
Rádio, predložiť, reset, obraz.
NAME =názov Pole symbolický názov hodnoty
VALUE =hodnota Obsah predvolené textové pole
CHECKED = voľba Tlačidlo / políčko v predvolenom nastavení označená
SIZE =x Počet znakov v textovom poli
SIZE =x Maximálny počet znakov
Skupina zaškrtávacie políčka
NAME =názov Pole symbolický názov hodnoty
SIZE =x Celkový počet položiek menu, ktoré sú zobrazené raz (default = 1)
VIAC =x Umožňuje viacnásobný výber položiek v menu
<MOŽNOSŤ Zvláštna voľba v poli
VALUE =hodnota Výsledná hodnota tejto ponuky výberu
Camp výstuž text na viacerých riadkoch
NAME =názov Pole symbolický názov hodnoty
ROWS =x Celkový počet riadkov textového poľa
COLS =x Počet stĺpcov (znakov) na riadku textového poľa
Podeľte sa o logickú formu v niektorých častiach
Názov spojený rad odborov (fieldset)
align =s Určite zarovnanie legendu (vysvetlenie) zobrazený (hore, dole, vľavo, vpravo)
tabindex =x Určiť poradie položiek, keď používateľ stlačí kláves Tab
ACCESKEY =c Ktorý poskytuje konkrétny kľúč zo klávesové skratky spojené s určitou položkou
DISABLED Prvok je neaktívne, ale na obrazovke sa zobrazí
readonly Prvok sa zobrazí na obrazovke, ale nemožno upravovať

Pokročilé prvky.

Konkrétne informácie o modelových štýloch
TYPE =val Typ štýlového modelu. Zvyčajne „text / css“
Zvyčajne obsahuje skript JavaScript vo svoje webové stránky
JAZYK =jazyk jazyk používaný
EVENT =udalosť Udalosť, ktorá spúšťa realizáciu konkrétnych skriptov
for =numeobiect Názov objektu stránka, na ktoré pôsobí skript

STIAHNITE SI HTML tabuľky s tagy

Ak chcete navštíviť stránky vykonaný výukový program, môžete pristupovať na tejto adrese: http://www.videotutorial.150m.com.

Odporúčam vám rozbaliť prílohu a študovať tri súbory HTML alebo CSS súbor pomocou programu Poznámkový blok ++ alebo iný program pre úpravu webových stránok týmto spôsobom možno vykonávať zmeny cau môže dokonca urobiť si poznámky počas nej budete učiť HTML bez teba účet.

Vy prajeme Vám príjemný a vítam vás na týchto cvičeniach v tejto sérii i mimo nej.

Sťahovanie súborov TEST

Dan Constantin
tutorialegimp.blogspot.com
Cristian Cismaru: Páči sa mi všetko, čo súvisí s IT&C, rád sa podelím o skúsenosti a informácie, ktoré sa mi každý deň hromadia. Učím sa ťa učiť!

Zobraziť komentáre (333)

  • Veľmi pekný, tony informácií uvedených v tomto návode.
    Tento výukový program je možné nazvať infúzie HTML a CSS.
    Možno, že nechcete dostať sa naučiť za niekoľko mesiacov tu môžete naučiť za hodinu alebo tak, videl som to všetko pred zverejnením a možno povedať, že na mňa dojem citovať informácie sa zmestí do tutoriálu.
    V jednej chvíli som cítil potrebu piť vodu, aj keď som len sledoval výukový program, ani ja chcem myslieť, citovať Dan pili vodu po tom.
    Existuje niečo, čo nie je naučiť HTML a / alebo CSS po tomto tutoriálu.

  • Aoleu, to, čo som sa snažil naučiť asi 3 mesiace, zjavne nemám čas ...
    Díky moc, ja to pozerať pozorne!

  • Cristi-adminVeľmi pekný, tony informácií uvedených v tomto návode.
    Tento výukový program je možné nazvať infúzie HTML a CSS.
    Možno, že nechcete dostať sa naučiť za niekoľko mesiacov tu môžete naučiť za hodinu alebo tak, videl som to všetko pred zverejnením a možno povedať, že na mňa dojem citovať informácie sa zmestí do tutoriálu.
    V jednej chvíli som cítil potrebu piť vodu, aj keď som len sledoval výukový program, ani ja chcem myslieť, citovať Dan pili vodu po tom.
    Existuje niečo, čo nie je naučiť HTML a / alebo CSS po tomto tutoriálu.

    Áno, máte pravdu cristi, ale som sklamaný, pretože som si myslel, že urobíte tutoriál :( ale napriek tomu bravo dan veľmi dobrý návod

    • Nie je to pekné, čo ste povedali, a úprimne vám to hovorím, tento muž sa asi hodinu a pol usilovne snažil naučiť, ako vytvoriť miesto od nuly, a hovoríte, že ste sklamaní, pretože to neurobil? Predstavte si, koľko práce človek vložil a koľko času stratil, aby nás naučil základom html a css. Pred otvorením úst si premyslite, že by vám nevyhovovalo prihlášku a potom zanechajte ďalšie nepotrebné komentáre, ako napríklad ste sklamaní, že to neuviedol, niekto iný vytvoril tento tutoriál, ďakujem vám, že máte kde sa učiť;)

  • zobák:
    Cristi áno, máte pravdu, ale som sklamaný, pretože som veril, že budete robiť tutoriale ale aj tak dan Bravo veľmi dobrú tutoriale

    Čo si myslíte, že séria o tom, ako vytvoriť web, je u konca.
    V budúcom tutoriále budem ja.
    Vzhľadom k tomu, čo budúci tutorial budem musieť byť sledovaný tento výukový program pod taktovkou Dan.
    Čo sa mi predstaviť sa líši od tutoriálu som urobil aza Dana, ale informácie v ňom bude nevyhnutný pre správne pochopenie vecí.
    Niekoľko spôsobov, ako publikovať obsah na webe, ale všetky majú spoločný menovateľ, HTML a CSS, bez nich nemôžete nič robiť.

  • Cristi-admin:
    Čo myslíš, že ukončil sériu s názvom "Ako vytvoriť webové stránky".
    V budúcom tutoriále budem ja.
    Vzhľadom k tomu, čo budúci tutorial budem musieť byť sledovaný tento výukový program pod taktovkou Dan.
    Čo sa mi predstaviť sa líši od tutoriálu som urobil aza Dana, ale informácie v ňom bude nevyhnutný pre správne pochopenie vecí.
    Niekoľko spôsobov, ako publikovať obsah na webe, ale všetky majú spoločný menovateľ, HTML a CSS, bez nich nemôžete nič robiť.

    Dobrý deň Cristi, príde rad PHP alebo JS?

  • alex:
    Dobrý deň Cristi, príde rad PHP alebo JS?

    Hovoríme o všetkom, ale tiež miesto PHP a JS sa viaže na HTML, HTML nemôže byť bez.
    PHP je viac používané na extrahovanie dát z databáz, webové stránky sú stále na HTML, či už hovoríme o dynamických stránkach (php, dhtml, asp, jsp, cf) alebo hovoríme o statických stránkach, používať HTML, bez neho nemôžete robiť nič.
    Mnoho ľudí urobí veľkú chybu „Nechcem už web HTML, chcem dynamický web php“, je to veľká chyba, HTML sa používa takmer všade, či už hovoríme o dynamických alebo statických stránkach.
    JS (Java Script) nie je to isté s JSP (Java Server Pages), ktorá závisí na serveri, JS stránky sú používané pre niektoré skripty, nie je treba žiadnych skriptov serverových JS možné spustiť ľubovoľný webový prehliadač bez nutnosti súčasť servera, a v tomto kurze, Dan používal sériu skripty JS (fotogaléria), napchať dochvíľny spôsob aplikácie JS, nie sú tam žiadne plné stránky s JS namiesto toho sú plné stránky pomocou Java server Pages, že je niečo iné, aj keď sa zdajú byť rovnaké.
    Viem, že ste začali študovať „kód“ už dávno, tento tutoriál je vynikajúcou pomocou, Dan urobil s týmto tutoriálom mimoriadnu vec, ani si neuvedomujete, aký je tento tutoriál cenný, pod týmto tutoriálom máte takmer všetky značky ), ktoré sa používajú v HTML, môžete ich použiť, najmä preto, že každý z nich má popis.
    Nedopustite, aby vaše Alex prestávka kód, je založený.
    Verte mi, že vám chýba NOT pre potenciálnych!

  • wow veľa veľmi dobre štruktúrovaných informácií, aby niekto mohol pochopiť. Osobne som sa pozrel na tutoriál len kvôli zisteniu niečoho nového, a ako tutoriál postupoval, bol som ohromený tým, ako ľahko je možné urobiť stránku, nie príliš naložené a veľmi príjemné na pohľad. Gratulujem k tomuto tutoriálu, ale aj všetkým ostatným. Teším sa na ďalšiu „infúziu“ (cristiho slová) s informáciami.

  • Gratulujeme !! Veľmi pekný návod, bude to Rumunsko plné webových dizajnérov :) (dúfajme, že !!)

  • Bude to výukový Dreamweaver? Dc nepoužíva Dreamweaver alebo vo svojich výučbových programov?

    Gratulujeme k všetkým tutoriálom ... ste najsilnejší;)

  • Ahoj .. tutoriál je naozaj skvelý, existujú „tony“ informácií .. a myslím si, že som sa musel naučiť základné html na úvodnej strane 98, robiť desiatky testov prevzatých z kníh v knižnici, pretože som nemal v tej dobe a teraz môžem sledovať tutoriál, ktorý vysvetľuje všetko, čo potrebujem vedieť .. je jasné, že som sa vyvinul :)))) .. Páčilo sa mi, že to bolo vysvetlené krok za krokom a že boli vložené na webe všetky základné príkazy + príklad, na ktorom je možné pracovať .. je jasné, že viete, čo robíte, ste skutoční učitelia !!
    Napriek tomu mnoho z tých, ktorí pracujú v oblasti webdesignu používanie programov, ktoré automaticky vydávať príkazy a moja otázka je budete robiť výukový program s takým programom ??
    Viem, že ste tento výukový program vypracovali na pochopenie príkazov, a tým aj na lepšie pochopenie programov webdizajnu ... ale stále som zvedavý, čo budete v tejto sérii výukových programov pokračovať, pretože o tejto téme sa veľa hovorí, aj keď ju niektorí považujú za dôležitú nudné, pokiaľ ide o tutoriály ako ten, ktorý pripravil Dan, za čo si za túto príležitosť gratulujem ...

súvisiace Post

Táto webová stránka používa cookies.