Dette selvstudium beskriver et websted ved hjælp af HTML og CSS, der dækker alle faser: hjemmeside udvikling,
oprette en konto på en gratis hosting og endelig uploade filer vores hjemmeside på, at hosting, gratis hosting er en hurtig metode til at sætte en hjemmeside vores online inden for få minutter, den ulempe ved denne metode er, at vi vil have nogle annoncer, der vises på alle tidspunkter i toppen (header ovenfor).
Enhver, der ønsker at åbne en hjemmeside, du behøver at vide HTML og CSS, behøver ikke at være ekspert i HTML (Hyper Text Markup Language), men nogle kodeoplysninger er absolut nødvendige for at forstå, hvordan disse ting fungerer.
Selv hvis du bygger et websted, du stadig nødt til at have nogen idé om, hvad der sker gennem disse filer vil kræve periodisk korrektion af fejl eller opnåelse af forandringer.
Mange mennesker løber væk fra kode, mange sammenligner kode med hieroglyfer, det er slet ikke sådan, nogen sagde engang: "KODE ER POETRY", han havde ret, når du ser, at noget er født fra en række kodelinjer, du føler dig vidunderlig, du bygger en virtuel verden med kun tastatur og mus.
Vi brugte applikationer bygget af softwarevirksomheder i lang tid, vi udførte kun computerdrift, det er tid til at udføre programmering, faktisk er det ikke et programmeringssprog, det er et "markup-sprog", men vi vil henvise til det er som et programmeringssprog, fordi det lyder temmelig underligt "markup sprog", HTML er et af de nemmeste programmeringssprog (markup), der bruges i dag, vi ser HTML på ethvert websted, mange software har i de komponenter af HTML, dette programmeringssprog er overalt, det er tid til at lære det.
Den første gang kan være mindre skræmmende, men hvis du er omhyggelig, end du vil straks forstå, at ikke alt er det så svært er enkle og smukke ting, vi skaber noget med vores hænder, det er det vigtigste.
Vi vil lære det grundlæggende, så vi lærer at indtaste tekst på en webside, så vil vi arrangere og vil farve teksten, bruger vi en sidetypografi CSS (cascading style sheets), som vi vil placere alle elementer på siden HTML overhovedet, så du vil placere på vores hjemmeside er lavet til at ligne et stykke.
Du vil lære enkle teknikker, grundlæggende HTML og CSS, selvom disse er grundlæggende ting i HTML og CSS, vil skabe overblik fornøjelig.
Til denne tutorial skal du væbne dig med opmærksomhed og tålmodighed, denne tutorial er ikke noget, vi har råd til at fortsætte lidt, om rulle par sekunder, du kan gå glip af noget meget vigtigt og du vil se bagefter ikke længere giver mening, koncentration oplysningerne er ekstremt høj, og det er derfor, jeg beder dig at være meget, meget forsigtig.
Efter denne tutorial, selv intensivt kursus vil jeg sige, vil du have en bedre idé om, hvad HTML og CSS, kan du styre koden godt, og du forstår HTML-dokument, føler, at HTML er ikke kun en vifte af heroglife vil sprede, du ved, hvad det er, når man ser på en HTML eller CSS én.
Vi vil lære om tags (tags), har vi her nogle eksempler på tags (tags), som du kan bruge i et HTML-dokument, så fortvivl ikke, behøver ikke at huske dem alle, er du nødt til at lære blot det grundlæggende i den første tabel resten kan findes her på hjemmesiden eller på nettet, når du har brug for dem.
Selv tabellerne er bestilt disse tags, er lavet ved hjælp af HTML.
Grundlæggende elementer (tags).
Definerer et filformat Web | |
dokument header | |
Tilul dokument | |
HTML-side krop | |
BGCOLOR = farve | Baggrundsfarve på siden |
TEKST =farve | Tekstfarve på siden |
LINK =farve | Ikke besøgte link farve side |
VLINK =farve | Besøgte link farve på siden |
ALINK =farve | Link Color under klik brugeren exacutat |
BAGGRUND = url | Baggrundsbillede side |
afsnit | |
<Hn> <Hn> | Undertitlen af dokumentet niveau (n = 1-6) |
Specifikke egenskaber af indrammede tekst | |
SIZE =n | Teksten størrelse er 1-7 |
FACE ="A, b" | Angiv font: aHvis det er tilgængeligt, eller b |
COLOR =s | Tekstfarve: enten en farve navn eller en RGB-værdi |
newline | |
oplysninger forformatteret | |
HTML Comenatriu | |
Materiale centre i side | |
vandrette lineal | |
SIZE =x | Lineal højde i pixels |
Bredde =x | Lineal bredde i pixels eller procenter |
NOSHADE | Deaktiver visning af skygge for den vandrette lineal |
align =x | Tilpasningen vandrette lineal på siden (venstre, center, højre) |
COLOR =x | Color vandrette lineal (kun IE) |
Mark typen anker | |
Href =url | hypertekst henvisning |
Href =#name | Henvisning til et internt anker |
Navn =navn | Definitionen af interne ankre |
Elementer til lister .
Beskrivelse definition | |
definition List typen | |
Inden definition | |
Feature liste | |
<OL | Bestilt liste (nummereret) |
TYPE =tip | Nummereringen. Mulige værdier: A, a, jeg, jeg, 1 |
START =x | Antallet af startede ordnet liste |
<UL | Uordnet liste (markeret) |
TYPE =formular | Form bogmærke. Mulige værdier: cirkel, firkant, disc. |
Tegn formatering elementer .
Indsæt tekst med fed | |
Indsæt tekst i kursiv | |
Indsæt fremhævet tekst | |
Proportional skrifttype tekst | |
citation bibliogarfica | |
oversigt Program | |
Style fremhævning logik | |
Tekst tastatur | |
Fremhævning stærk logik | |
Program eller variabel | |
<BASEFONT SIZE = n> | Angiver standard skriftstørrelsen af siden |
Elementer til rammer .
Definition skrivning side | |
COLS =x | Antallet og den relative størrelse af kolonnerne |
RÆKKER =x | Antallet og relative størrelse linjer |
Border =x | Specificerer status "on" eller "off" for FRAMESET-rammen (1 eller 0) |
frameborder = x | Angiver rammen størrelse |
FRAMESPACING = x | Mængden af plads mellem to tilstødende rammer |
Definitionen på et bestemt billede | |
SRC =url | URL kilde til rammen |
NAME =navn | Rammenavn (bruges sammen med TARGET = navn som en del af ankermærket |
rulning =SCRL | Definer option bar derulare.Valori muligt: på (aktivere), off (inaktiv), auto (automatisk) |
frameborder =x | Størrelsen af grænsen rundt om rammen |
marginheight =x | Den ekstra plads over og under en vis ramme |
marginwidth =x | Suplimetar plads til venstre og højre for en specifik |
Afsnit side vises for brugere, der ikke kan se en ramme | |
Framework (kun (IE) | |
SRC =url | ramme kilde |
NAME =s | Vinduet navn (nyttigt for TARGET) |
HEIGHT =x | Embedded ramme højde |
Bredde =x | Embedded ramme bredde |
Elementer til tabeller .
HTML-tabel | |
Border =x | tabel border |
cellpadding =x | Den ekstra plads i tabelceller |
cellspacing =x | Den ekstra plads mellem tabelceller |
Bredde =x | Pålagt bredde bord |
FRAME =værdi | Finjustering af bordet |
REGLER =værdi | Linealer finjustering table |
bordercolor = farve | farve Specifikationer Tabel grænsen |
BORDERCOLORLIGHT = farve | Den lysere farve af de to farver specificeret |
BORDERCOLORDARK = farve | Den mørkere farve af de to farver specificeret |
align =til venstre | Justerer bordet til venstre margen på siden, og teksten flyder højre side |
align =højre | Justerer tabellen til højre kant af siden og teksten flyder til venstre |
hspace =x | Suplimetar vandret plads rundt om bordet |
vspace =x | Suplimetar lodret plads omkring bordet |
COLS =x | Angiver antallet af kolonner i en tabel |
Definerer et sæt kolonnedefinitioner ved hjælp af markering | |
<COL Bredde =x> | Definerer en kolonne bredde i pixel |
Definerer overskriften tabellen | |
Definerer bordet krop | |
Linje bord | |
BGCOLOR =farve | Angiver baggrundsfarven for hele linjen |
align =tilpasning | Cell tilpasning til den aktuelle linje (venstre, center, højre) |
Datacelle i tabellen | |
BGCOLOR =farve | Angiver baggrundsfarven for cellen data |
colspan =x | Antallet af kolonner, der dækker aktuelle celle data |
rowspan =x | Antallet af linier strækker aktuelle celle data |
align =tilpasning | Rettes stoffet af cellen date.Valori mulige: (venstre, højre, center) |
VALIGN =tilpasning | Lodret justering af materialet fra cellen date.Valori mulige: (top, bund, midten) |
BAGGRUND =url | Angiver baggrundsbillede for tabelcelle |
NOWRAP | Lad ikke opdele tekstlinjer inden for en celle |
align =baseline | Juster data celler til grundlinjen af tilstødende tekst |
align =karakter | Justerer en kolonne til et specifikt tegn (standardtegnet er ".") |
align =retfærdiggøre | Juster både den venstre kant og højre kant af teksten |
Produkter til tilføje billeder.
<IMG | Mærkning input billeder |
SRC =url | Kildefil grafik |
ALT =tekst | Alternativ tekst skal vises, hvis det er nødvendigt |
align =tilpasning | Justering af billedet på siden. Mulige værdier: top (top), midterste (i midten), bund- (nedenfor), venstre (venstre), højre (højre) |
HEIGHT =x | Billede højde (i pixel) |
Bredde =x | billede bredde |
Border =x | Rammen omkring billedet, når det anvendes som hyperlinks |
hspace =x | Den ekstra plads omkring billedet vandret (i pixel) |
vspace =x | Den ekstra plads omkring billedet lodret (i pixel) |
Forms elementer.
Aktiv HTML-formular | |
ACTION =url | CGI program på den server, der modtager data |
METODE =metode | Hvordan data sendes til serveren (GET eller POST) |
<INDGANG | Camp tekst eller andre data input |
TYPE =option | Indtastningstype . Mulige værdier: tekst, adgangskode, afkrydsningsfelt, skjult, fil, Radio, indsende, nulstille billede. |
NAME =navn | Den symbolske navn værdifeltet |
VALUE =værdi | Indhold standard felt tekst |
CHECKED = option | Knap / afkrydsningsfelt markeret som standard |
SIZE =x | Antallet af tegn i et tekstfelt |
SIZE =x | Det maksimale antal tegn er tilladt |
Gruppe afkrydsningsfelter | |
NAME =navn | Den symbolske navn værdifeltet |
SIZE =x | Antallet af menupunkter, der vises én gang (standard = 1) |
FLERE =x | Giver flere valg af menupunkter |
<MULIGHED | Særligt valg i et felt |
VALUE =værdi | Den resulterende værdi af denne menuvalget |
Camp forstærkning tekst på flere linjer | |
NAME =navn | Den symbolske navn værdifeltet |
RÆKKER =x | Antallet af linjer af tekstboksen |
COLS =x | Antallet af kolonner (tegn) per linie af tekstboksen |
Del logisk form, i dele | |
Navn tilhørende sæt felter (fieldsets) | |
align =s | Angiv tilpasningen legende (forklaring) vises (top, bund, venstre, højre) |
tabindex =x | Angiv ordrelinjer, når brugeren trykker på Tab-tasten |
ACCESKEY =c | Hvilket giver specifik nøgle fra tastaturgenvejen knyttet til et bestemt punkt |
DEAKTIVERET | Elementet er inaktiv, men vises på skærmen |
skrivebeskyttet | Elementet vises på skærmen, men kan ikke redigeres |
Avancerede elementer.
Specifikke oplysninger om model stilarter | |
TYPE =val | Typen af stilmodel. Normalt "tekst / css" |
Normalt indeholder et script Javascript i din webside | |
LANGUAGE =sprog | Sproget |
EVENT =begivenhed | Begivenhed, der udløser udførelsen af specifikke scripts |
TIL =numeobiect | Objekt Navn side der fungerer script |
DOWNLOAD HTML TABELLER MED TAGS
Hvis du ønsker at besøge stedet gennemført tutorial, kan du få adgang på denne adresse: http://www.videotutorial.150m.com.
Jeg anbefaler, at du lyne den vedhæftede fil og studere de tre filer html eller CSS-fil ved hjælp af Notepad ++ eller anden redigering program websider på denne måde kan foretage ændringer Cau kan endda gøre notater under det du vil lære html uden dig konto.
Du ønsker dig et behageligt og byder dig velkommen på følgende tutorials i denne serie og videre.
Se kommentarer (333)
Very nice, tonsvis af oplysninger i denne tutorial.
Denne tutorial kan kaldes infusion af HTML og CSS.
Måske har du ikke kommer til at lære i et par måneder, du kan lære her i en time eller deromkring, jeg har set det hele før bliver bogført og kan sige, at imponeret mig citere oplysninger kan passe ind i en tutorial.
På et tidspunkt følte jeg behov for at drikke vand, selv om jeg kun set den lærer, heller ikke jeg vil tænke, citerer Dan drak vand efter det.
Der er noget ikke at lære HTML og / eller CSS efter denne tutorial.
Aoleu, hvad jeg har prøvet i omkring 3 måneder for at begynde at lære, har jeg stadig ikke tid...
Mange tak, jeg ser det omhyggeligt!
ja, du har ret, Cristi, men jeg er skuffet, fordi jeg troede, du ville lave en tutorial :( men alligevel, godt gået, meget god tutorial
Det er ikke pænt, det du sagde, og jeg fortæller dig det ærligt, denne mand kæmpede i cirka halvanden time for at lære dig, hvordan du laver en hjemmeside fra bunden, og du siger, at du er skuffet, fordi han ikke gjorde det? Kan du forestille dig, hvor meget arbejde manden har lagt i, og hvor meget tid han har mistet for at lære hver enkelt af os det grundlæggende i html og css, tænk før du åbner munden, at det ikke ville passe dig at lægge i arbejdet og så forlade andre ubrugelige kommentarer som at du er skuffet over, at en anden ikke lagde denne tutorial, vær taknemmelig for at du har noget at lære af ;)
Hvad tror du, at serien om "Sådan laver man en hjemmeside" er slut.
I den næste tutorial vil være mig.
For hvad det næste tutorial jeg bliver nødt til at blive set denne tutorial udført af Dan.
Hvad jeg præsentere er forskellig fra den tutorial jeg lavede aza Dan, men oplysningerne i det vil være uundværlig for korrekt forståelse af tingene.
Er flere måder at udgive indhold på internettet, men alle har en fællesnævner, HTML og CSS, uden dem kan du ikke gøre noget.
Hej Cristi, vil komme en række php eller js?
Vi taler om alt, men også PHP og JS stedet binder til HTML, kan HTML ikke uden.
PHP bruges mere til at udtrække data fra databaser, websider er stadig baseret på HTML, uanset om vi taler om dynamiske sider (php, dhtml, asp, jsp, cf) eller om vi taler om et statisk websted, vil vi bruge HTML-sproget, uden det kan intet gøres.
Mange laver en stor forvirring "Jeg vil ikke have en HTML-side mere, jeg vil have en dynamisk php-side", det er en stor fejl, næsten alle steder bruges HTML uanset om vi taler om dynamiske sider eller statiske sider.
JS (java script) er ikke det samme med JSP (Java Server Pages), der er afhængig af en server, der JS sites anvendes til visse scripts, ikke behov for nogen server scripts JS kan køre i en browser uden behov server komponent, og i denne tutorial, Dan brugt en række scripts JS (fotogalleri), at proppe punktlige anvendelser JS, er der ingen fuld websteder med JS i stedet er fulde websteder ved hjælp af Java server Pages, der er noget andet, selv om de synes det samme.
Jeg ved, at du begyndte at studere "koden" for længe siden, denne tutorial er en fremragende hjælp, Dan gjorde et godt stykke arbejde med denne tutorial, du vil ikke engang indse, hvor værdifuld denne tutorial er, under tutorialen har du næsten alt tags (elementerne ), der bruges i HTML, kan du bruge dem, især da hver enkelt har en beskrivelse.
Lad ikke din ALEX, break kode, er det baseret.
Tro mig, du mangler IKKE POTENTIALE!
wow, en masse information meget velstruktureret, så alle kan forstå. Jeg så personligt selvstudiet bare for at lære noget nyt, og efterhånden som selvstudiet skred frem, blev jeg overrasket over, hvor nemt det er at lave en hjemmeside, der ikke rigtig er indlæst og meget behageligt for øjet.Tillykke med denne tutorial, men også til alle de andre. Jeg ser frem til den næste "infusion" (med Cristis ord) med information.
Tillykke!! Meget flot tutorial, der vil være et Rumænien fuld af webdesignere :) (lad os håbe!!)
Det vil være en tutorial Dreamweaver? Dc ikke bruge Dreamweaver eller i din tutorials?
Tillykke med alle tutorials... du er den bedste ;)
Hej.. tutorialen er virkelig cool, der er masser af information.. og jeg tror, at jeg var nødt til at lære grundlæggende html på forside 98 ved at lave snesevis af tests taget fra bøger på biblioteket, fordi jeg ikke havde net på det tidspunkt og nu kan jeg se en tutorial, der forklarer alt, hvad jeg har brug for at vide..det kan ses, at jeg har udviklet mig :)))..Jeg kunne godt lide, at det blev forklaret trin for trin, og at de blev lagt på hjemmesiden alle de grundlæggende kommandoer + et eksempel der kan arbejdes videre med.. det kan ses at I ved hvad I laver, I er rigtige lærere!!
Alligevel meget af dem, der arbejder i webdesign hjælp programmer, der automatisk gør ordrer og mit spørgsmål er, vil du lave en tutorial med et sådant program ??
Jeg ved, at du har lavet denne tutorial for at forstå kommandoerne og dermed en bedre forståelse af webdesign-programmerne..men alligevel er jeg nysgerrig efter at se, hvad du vil fortsætte med denne serie af tutorials, fordi der er meget snak om dette emne, selv hvis nogle synes, det er kedeligt, når det kommer til tutorials som den lavet af Dan, som jeg ved denne lejlighed ønsker tillykke med tutorialen...