DAVEN FARNHAM: Vandag, ek gaan praat 'n bietjie oor HTML, HyperText Markup Language. Jy sien HTML oral deesdae. In werklikheid, as jy hierdie is kyk video in 'n leser, is jy sien HTML nou. HTML is nie 'n programmeertaal, Inteendeel, dit is 'n opmaak taal webblaaiers bladsye te lewer op die internet. 

So jy kan vra, hoe presies skryf 'n webblad in HTML verskillende van die skryf van 'n program in 'n programmeertaal taal soos C? Wel, C is 'n taal met 'n baie streng sintaktiese reëls wat moet wees saamgestel word voordat dit kan hardloop. As jy al ooit vergeet om 'n sluit kommapunt aan die einde van 'n verklaring in jou C-kode, jy weet wat ek praat oor met betrekking tot 'n streng sintaks. 

Webblaaiers al is, is 'n bietjie meer vergewe wanneer dit kom by HTML. Selfs as jou HTML is nie sintakties korrek, jou bladsy kan nog steeds vertoon deur 'n leser, maar dit kan as jy bedoel nie kyk nie. Dus is dit altyd die beste om volg die reëls. Die beste manier om 'n aanvoeling te kry oor hoe dinge werk is om te gaan deur 'n voorbeeld. 

So wat ons hier het is 'n basiese bloudruk vir 'n web bladsy. Jy het waarskynlik opgemerk 'n baie van die dinge wat tussen skuins hakies. Wel, dit is net tags. Tags basies inlig webblaaiers dat hey, iets jou pad kom. Onthou egter, wanneer jy maak 'n tag, moet jy dit te sluit wanneer jy gedoen om dit te gebruik. 

So byvoorbeeld, het ek 'n artikel oop van die kode met 'n oop bracket liggaam, naby bracket. Ek voeg dan 'n paar teks, in hierdie geval, my eerste webblad dan wanneer ek na sluit hierdie afdeling, ek gebruik amper 'n identiese tag behalwe hierdie keer met 'n slash voor liggaam. In die algemeen, is dit die formaat is jy gaan gebruik wanneer jy die opening en die sluiting van etikette. Saam, 'n oop tag en 'n einde tag komponeer wat genoem 'n element. 

As jy kyk na die eerste reël, sal jy sien 'n uitroepteken, gevolg deur DOCTYPE HTML. Dit is regtig net vertel jou leser dat die lêer is 'n web bladsy geskryf in HTML. Die HTML tag sê in wese, hier kom 'n paar HTML. Dan het ons 'n kop tag met 'n titel tag daarin. Die hoof tag wat jy kan dink as bestaande HTML-kode wat kom vir die grootste deel van jou webblad se werklike inhoud. 

In die algemeen, jy het die titel van jou webblad hier, maar daar is 'n paar ander etikette wat kan verskyn hier so goed. Volgende kom jou webblad se liggaam, die werklike vleis en bene van jou webwerf. In ons voorbeeld, ons het net 'n eenvoudige vonnis, was my eerste webblad wat, as ons loop ons webwerf, sal kyk 'n bietjie iets soos hierdie. Ons webblad is nie te queer, maar moenie bekommerd wees nie. Ons sal kikker dit gou. 

So die bogenoemde HTML, sal ons gee jou 'n baie basiese patroon vir 'n webblad, niks fancy nie, net die kaal bene. Maar as ek die skep van 'n webblad, Wat as ek wil 'n by te voeg prentjie van, sê, myself? Wel, ek kan dit doen. Daar is 'n paar maniere om te beeld by te voeg jou site. As die beeld is in dieselfde gids as jou HTML-lêer, kan jy 'n skakel na die Beeld via pad soos hierdie. 

Jy maak met 'n beeld tag gevolg deur in atributen in die bron van die beeld. Die atributen se waarde is net 'n paar alternatiewe teks in die geval van 'n gebruiker kan nie sien die beeld. Alternatiewelik, kan jy ook 'n skakel na beelde via 'n volle URL, soos hierdie. Nou, beteken dat die webwerf nie werklik bestaan ​​nie, maar as daar was 'n foto van my by die adres, kan ek gebruik die bron URL in te sluit sy beeld op my webwerf. Óf weg, jy eindig met 'n baie mooier webwerf, iets soos hierdie. 

Wel, dit is pretty cool, maar ek soort wil 'n paar van die teks hier. So laat ons net iets byvoeg super eenvoudige bo die beeld, soos die kop. Al wat ek tot dusver gedoen het, is gebruik om die kop tag, H1, en 'n lyn breek tag, br. Die kop tag maak die skrif 'n bietjie bietjie groter en meer prominent. Die lyn breek tag, aan die ander kant hand, is gaaf. Anders as die meeste ander etikette, jy hoef nie 'n opening en sluiting break tag, net die een hierbo. Dit is omdat break het geen inhoud en is dus 'n leë element. 

Leë elemente soos hierdie, kan jy maak en sluit gelyktydig deur eenvoudig insluitend 'n slash aan die einde van die aanvanklike verklaring. So nou my website lyk 'n bietjie iets soos hierdie. Beter, maar dit soort van voel soos 'n doodloopstraat. Daar is nêrens anders ter syde te gaan In die hoof bladsy. Wel, laat ons dit regmaak deur insluitend 'n skakel. 

Wat gaan ek hier doen, is gebruik om 'n kenmerk aangedui deur A en maak die beeld 'n skakel na, kom ons sê, CS50 TV. Op dié manier, wanneer iemand druk op my, hul leser sal gerig word aan 'n ander, waarskynlik meer nuttige, web bladsy. Ek het die grootte van die minimum te beperk teks 'n bietjie, want ons webblad is om meer gevorderde. Maar hopelik, dit is nog steeds duidelik. My webwerf lyk presies dieselfde net nou, wanneer ek kliek op die foto, my leser sal oopmaak 'n ander blad vir die CS50.tv webblad. 

Laastens, kom ons sê ek gaan styl hierdie webwerf later met behulp van CSS. CSS is wat bekend staan ​​as 'n Cascading Style sheet. En dit basies is 'n doeltreffende manier om te wysig en styl soortgelyke blokke van die kode. Ek wil om te begin organiseer my HTML te Maak dit makliker om later op stileer. Hier, ek stel twee verskillende soorte identifiseerders te help om my kode organiseer. Ek het gebruik om die ID eienskap in 'n afdeling, of div tag, en ek het gebruik om 'n Klas kenmerk binne 'n ander div tag. 

ID en Klas eienskappe Net so werk. Die enigste verskil is dat jy kan net een element van die spesifieke ID, maar enige aantal elemente kan 'n klas deel. So byvoorbeeld, kan ek die klas gebruik beeld verskeie kere, maar ek kan nie 'n ander afdeling te skep met die ID top. Alhoewel ek nie gegaan het nie in CSS, 'n ander taal wat algemeen gebruik word saam met HTML, nadat ek begin stilering my kode met CSS, kan ek hierdie gebruik organisatoriese kenmerke invloed my webblad se estetika. 

Alles binne die afdeling top sal soortgelyke stylings of enige het ander groep HTML Ek groep in die klas beeld sal deel 'n soortgelyke voorkoms. Dit is baie makliker as om te probeer om te wysig en styl beelde of blokke teks individueel. 

So het ons oor die basiese beginsels van hoe 'n webblad te maak met HTML. HTML het 'n klomp van die ander funksies te dat wanneer dit saam met ander tale soos CSS en JavaScript, kan regtig maak bladsye uit te staan. Die beste manier om gemaklik met te kry HTML is net om gemors rond met dit, sien wat werk en wat nie werk nie. 

My naam is Daven Farnham. Dit is CS50. 

So byvoorbeeld, kan ek gebruik die klas beeld - Nee, daar is so baie eienskappe. My naam is Daven Farnham. Dit is CS 650. Ek wil CSS te sê. Dit is CSS.