TIL ...

Ilmainen kurssi: Luo blogi tyhjästä

Se saattaa olla helpompaa kuin kuvitellaan

Ennen kuin pääsen artikkeliin, haluan vain kertoa, että rakennan tuotetta, ja haluaisin mielelläni kerätä joitain tietoja siitä, kuinka palvella web-kehittäjiä paremmin. Loin lyhyen kyselylomakkeen tarkistaaksesi ennen tai jälkeen tämän artikkelin lukemisen. Tarkista se - kiitos! Ja nyt takaisin normaaliin ajoitettuun ohjelmointiin.

Rakentamamme blogi. Haluatko videon? Napsauta tätä avataksesi Scrimba

Jos olet kuin minä, olet kiinnostunut verkosta ja sen ylivoimaisesta ulottuvuudesta, mutta olet myös täynnä HTML: n ja CSS: n oppimista tarjoavaa tietoa. Asia on, että nämä kielet ovat toisin kuin muut verkkotunnukset, kuten tekstinkäsittely- ja ohjelmointikielet. Verkko on toinen maailma, eikä se ole kauneinta asiaa.

Kun olen oppinut minulta verkon, olen täällä antaakseni kevyesti rohkaisua, koska pienellä ohjauksella nämä verkkotunnukset voivat olla paljon helpompia kuin kuvitellaan. Jatka lukemista, ja rakennamme kauniin blogin tyhjästä. Opimme myös joitain CSS-ruudukkoja, Flexboxia ja Responsive Designia.

Tavoitteena on tehdä puolestasi se mitä olen tehnyt itselleni; Opi HTML ja CSS ensisijaisista periaatteista.

Haluatko videon? Napsauta tätä avataksesi Scrimba

Opetin myös ilmaisen HTML / CSS-kurssin Scrimbassa, missä opetan kuinka rakentaa kaunis blogi * tyhjästä *. Napsauta tätä ilmoittautuaksesi!

Scrimba.com on interaktiivinen käyttöliittymä, jossa verkkosivustot tallennetaan tapahtumina - ei videoina - ja niitä voidaan muokata!

Joten mistä HTML tulee?

HTML on ensimmäisen meta- tai merkintäkielen, GML, jälkeläinen. Millennium-lukijat ovat nyt selvittäneet, että GML tarkoittaa yleistä merkintäkieltä, mutta se ei ole kaikki. Charles Goldfarb, Edward Mosher ja Raymond Lorie loivat sen, mitä me nyt tiedämme meta- tai merkintäkielenä IBM: ssä. Ja vuonna 1996 Charles Goldfarb kirjoitti:

"Annoin GML: lle nykyisen nimensä, jotta alkukirjaimemme osoittaisivat aina sen, mistä se on peräisin. Yksi teknologiansiirron rumaista totuuksista on, että kehittäjät ovat yleensä kiitollisia tutkimustyöstä, kun ne ensin vastaanotettiin, ja ovat käytännössä unohtaneet sen pitkän kehitysjakson loppuun mennessä ... ”
- Charles Goldfarb, vuonna 1996

GML: stä tuli myöhemmin standardisoitu, jolloin siitä tuli SGML. Sitten CERN: ssä työskennellyt Tim Berners-Lee lainasi ML: n SGML: ltä (ei, ei koneoppimisesta tai mistä tahansa hipsteristä sitä kutsutaan) HTML: n luomiseksi, jossa HT tarkoittaa HyperText.

Hei, hieno sana. Ja kuten ymmärrän, sen juuret ovat interaktiivisessa tekijäympäristössä nimeltä HyperCard, Bill Atkinsonilta, joka työskenteli Applessa. Syventävää tutkimusta varten lähetän seuraavat videot:

Napsauta jompaa kumpaa saadaksesi lisätietoja

Joten - katsotaanpa. HTML ei vain vallannut maailmaa. Itse asiassa HTML oli ennen koko maailmaa. TÄH? Tiedän, että vapisen shokissa - mutta en ollut syntynyt - niin, sellaista ei ollut maailmaa.

Ja HTML on paljon edeltäjilleen velkaa. Kuten me kaikki vanhemmillemme. Siitä huolimatta, miten teemme koodin tekstistä. Nyt neljään minuutin minuuttiopetukseen opetan HTML: n, CSS: n ja reagoivan suunnittelun perusteet.

HTML ja CSS 4 minuutissa

Ensimmäinen minuutti: Verkkosivusto voidaan ymmärtää paremmin web-puuna


     
     

Kaikki sivustot alkavat elämänsä sellaisenaan. Kuitenkin - ja tämä on kauhea - sisältöä ei ole. Siitä huolimatta aloitamme tästä, koska meidän on ensin ymmärrettävä, mikä on verkkosivusto. Ajattele sitä puuna - ylösalaisin puuna * - webtree. Html-elementti on juuri, kun taas pää ja vartalo ovat webtree-sovelluksen ensimmäisiä oksoja:

   html <- juuri
   / \
pään runko <- oksat

Pääelementti (tai tunniste - sama asia) on tarkoitettu metatiedoille tai verkkosivustoamme koskeville tiedoille. Runkoelementti puolestaan ​​on verkkosivustomme sisältöä. Ja koska CSS on verkkosivustomme tyyli, se menee pääelementtiin, kun taas sisältö, kuten kappaleet, kissan videot (≧ ∇ ≦) ja niin edelleen, menee runkoelementtiin.

Toinen minuutti: elementeillä tai tunnisteilla on useita esiintymiä


 arvo 
 arvo 
  1. Ensimmäinen elementti on itsesulkeutuva elementti, jossa välitämme jotain selaimeen, mutta sillä ei ole myöskään arvoa. Esimerkki tästä on
    -elementti, joka lisää rivinvaihdon.
  2. Toinen elementti on yhteinen elementti, jossa kommunikoimme arvon kuuluvan johonkin elementtiin. Esimerkiksi

    ​​hei, maailma!

    on arvo “hei, maailma!” Kuuluvana kappaleelementtiin.
  3. Viimeiseksi meillä on elementti, jolla on attribuutti. Ja ominaisuus on mitä kuulostaa - hemmot, se on ominaisuus! Se antaa elementille enemmän kontekstia tai merkitystä. Attribuuteilla voi olla useita arvoja ja elementeillä voi olla useita määritteitä. Määrite-ryhtymisen.
 arvo 

Nyt - minun on mainittava - emme luo HTML-elementtiemme nimiä. Lainaamme ne luettelosta noin 100 ennalta määritettyä elementtiä. Tietenkin tämä tekee joistakin asioista helpompia, ja joistakin asioista paljon, paljon vaikeammista, kuten muistamisesta!

Kolmas minuutti: Kuinka HTML ja CSS kommunikoivat