Daven FARNHAM: Ma megyek beszéljünk egy kicsit a HTML, HyperText Markup Language. Látod HTML mindenütt ezekben a napokban. Sőt, ha ezt nézed video a böngészőben, akkor látva HTML most. HTML nem programozási nyelv, inkább ez egy leíró nyelv által használt böngészők tétele oldalak az interneten. 

Szóval lehet kérni, hogy pontosan ír a weboldal HTML különböző írás egy programot a programozó nyelv, mint a C? Nos, a C egy nyelv nagyon szigorú szintaktikai szabályokat kell össze mielőtt futni. Ha valaha is elfelejtette, hogy tartalmazza a pontosvessző végén egy nyilatkozatot A C kód, tudod, mit beszélek mintegy annak tekintetében, hogy a szigorú szintaxis. 

Webböngészők, bár, egy kicsit megbocsátó, amikor a HTML. Még ha a HTML nem szintaktikailag helyes, az oldal még mindig jelenik meg a böngészőben, de lehet, hogy nem úgy néz ki, mint ahogy tervezte. Tehát mindig a legjobb követi a szabályokat. A legjobb módja, hogy az intuíció arról, hogyan működnek a dolgok, hogy végig egy példát. 

Szóval, mi van itt egy alapvető tervezet egy internetes oldalon. Valószínűleg észrevette, hogy egy csomó dolgot között szögletes zárójelben. Nos, ezek csak címkék. Címkék alapvetően tájékoztatja böngészők hogy, hé, valami jön az utat. Ne feledje azonban, ha megnyitja a tag, be kell zárnia, hogy ha már használatával történik meg. 

Így például, nyitok egy szakaszt kód nyitott tartó test, záró zárójel. Én majd adjunk hozzá egy kis szöveget, ebben az esetben, az első weboldalt, akkor, amikor elmentem zárja ezt a részt, azt használja majdnem azonos címke kivéve, ezúttal egy perjel előtt testet. Általában ez a formátum akkor fogja használni, amikor nyit és a záró tag. Együtt, egy nyitott címkét, és véget tag alkotják az úgynevezett egy elem. 

Ha megnézzük az első sorban, akkor megjelenik egy felkiáltójel követ DOCTYPE html. Ez tényleg csak mondja a böngésző , hogy a fájl egy weboldal írt HTML. A HTML tag lényegében azt mondja, Itt van pár HTML. Aztán van egy fej címkét a címet tag benne. A fej tag lehet gondolni, mint amely HTML kódot, ami a a nagy részét a weblap tényleges tartalom. 

Általában, akkor tegye a címe a honlap itt, bár van néhány további címkék is megjelennek itt is. Ezután következik a weboldal testét, a tényleges hús és a csontok az Ön honlapján. A példánkban most már csak hogy egy egyszerű mondat, az első Web, amely, ha fut az oldalon, fog kinézni egy kis valamit, mint ez. A weboldal nem túl furcsa, de ne aggódj. Majd lucfenyő fel hamarosan. 

Tehát a fenti HTML, akkor kapsz egy nagyon alapvető sablon egy weboldalt, semmi különös, csak a csupasz csont. De ha én honlap elkészítésére, mi van, ha hozzá szeretne adni egy kép, mondjuk, én magam? Nos, meg tudom csinálni. Van egy pár módon hozzá képeket webhelyére. Ha a kép ugyanabban a mappában, mint a HTML fájlt, akkor link a Image via utat, mint ez. 

Ha nyit egy képet tag követte in Alt attribútum a forrása a kép. Az Alt attribútum értéke csak néhány alternatív szöveget abban az esetben a felhasználó nem lásd a képet. Alternatív megoldásként, akkor is hivatkoznak képek segítségével a teljes URL-t, mint ez. Most, hogy a honlap nem igazán létezik, de ha lenne egy kép nekem a címet, tudtam használni A forrás URL tartalmazza a kép a honlapomon. Akárhogy is, a végén egy sokkal szebb honlap, valami ilyesmi. 

Hát, ez elég jó, de valahogy A szeretnénk szöveget itt is. Szóval csak adj valamit, szuper egyszerű felett kép, mint a fejléc. Minden, amit eddig, hogy használja a header tag, H1 és a sortörés tag, br. A fejléc tag teszi a font egy kicsit kicsit nagyobb és nagyobb. A sortörés tag, a másik viszont elég jó. Ellentétben a legtöbb más címkéket, akkor nem kell nyitó és záró szünet tag, csak az egyik, a fentiek szerint. Ez azért van, mert szünet nincs tartalma , és ezért egy üres elem. 

Üres elemeket, mint ez, meg tudja nyitni és közel egyszerre egyszerűen beleértve a perjel a végén az eredeti nyilatkozat. Tehát most a website néz ki egy kicsit valami ilyesmi. Jobb, de ez a fajta érzés mint egy zsákutca. Nincs hová menniük félre ebből a főoldalon. Nos, rögzíteni, hogy a köztük egy linket. 

Mit fogok csinálni itt is használ attribútumot jelöl, és a kép egy linket, mondjuk, CS50 TV. Így, ha bárki rákattint rám, a böngészőben fog irányulni, hogy egy másik, talán még hasznos weboldal. Elegem van, hogy minimálisra csökkentsék a méret a szöveg egy kicsit, mert a weboldal egyre fejlettebb. De remélhetőleg, még mindig világos. Saját honlap néz ki, pontosan ugyanaz csak Most, amikor rákattintok a képre, a böngésző nyit egy a lap a CS50.tv weboldalt. 

Végül mondjuk fogom stílus ezen a honlapon később CSS. CSS, amit ismert, mint egy lépcsőzetes stíluslap. És ez alapvetően biztosítja a hatékony módon szerkeszteni és stílus hasonló blokkokat a kódot. Azt akarom, hogy megkezdi a HTML megkönnyítik a stílust később. Itt, én meg két különböző azonosítókat, hogy segítsen megszervezni a kódot. Én is használtam az attribútum belül osztály, vagy a div tag, és én is használtam a Class attribútum belül egy div tag. 

Id és a class attribútumok hasonlóan működnek. Az egyetlen különbség az, akkor csak egyik eleme, az egyedi azonosító, de tetszőleges számú elem osztozik egy osztály. Így például, tudom használni az osztály képet többször, de nem tudok hozzon létre egy másik részlege Az ID tetején. Bár én még nem ment bele CSS, egy másik nyelvet általánosan használt mellett HTML, ha egyszer elkezdem stílus a kód CSS, tudom használni ezeket a szervezeti tulajdonságokat befolyásolja a weblap esztétika. 

Minden körzetben felső is hasonló kápráztatja vagy másik csoportja a HTML I csoport a osztály kép megosztja a hasonló megjelenés. Ez sokkal egyszerűbb, mint próbál szerkeszteni és stílusú képek vagy blokkolja a szöveg külön-külön. 

Így mentünk át az alapokat, hogy milyen , hogy egy weblap HTML. HTML egy csomó más funkciók is hogy amikor párosítva más nyelveken mint a CSS és a JavaScript, tényleg az oldalak kitűnjön. A legjobb módja, hogy kényelmes HTML csak szórakozni vele, mi működik, és mi nem. 

A nevem Daven Farnham. Ez CS50. 

Így például, tudom használni az osztály kép - Nem, olyan sok attribútumokat. A nevem Daven Farnham. Ez a CS 650. Azt akarom mondani, CSS. Ez a CSS.