Pozdrav svima!

Nakon što počnemo učiti, moramo znati osnove HTML-a i CSS-a, što će pomoći da naše stranice budu bolje i privlačnije tražilicama. Cijeli ovaj tjedan pričat ću vam o radu s kodom web stranice, a ovo vas očekuje:

• . Naučit ćemo kako urediti kod web stranice pomoću ovih editora;
• . Pomoći ćemo robotu za pretraživanje da razumije strukturu stranice;
• . Saznat ćemo koliko je ispravno sastavljen kod stranice i pronaći pogreške;

Kao što vidite, imat ćemo puno posla ovaj tjedan, stoga se pretplatite na ažuriranja bloga Context-UP i primajte sve lekcije na svoju e-poštu ako se već niste pretplatili.

Osnove HTML-a

HTML (Hyper Text Markup Language) je jezik za označavanje dokumenata na Internetu. To jest, svaka stranica vaše web stranice je dokument, a preglednik je sredstvo za pregled takvih dokumenata.

Svrha HTML-a je pokazati pregledniku gdje se nalazi ovaj ili onaj element dokumenta. Koristeći ovaj jezik, elementi se označavaju na stranici i zauzimaju određeno mjesto, a zatim se prikazuju na monitoru posjetitelja stranice.

Označni jezik sastoji se od posebnih oznaka koje pregledniku pomažu odrediti:

• Struktura dokumenta;
• Mjesto određenog elementa;
• Namjena elementa;
• Uključene datoteke trećih strana;
• I još puno, puno više.

Roboti za pretraživanje također to razumiju, stoga morate obratiti posebnu pozornost na to koliko je dobro dokument sastavljen sa SEO gledišta i kakvu strukturu ima.

HTML struktura

Svaki HTML dokument ima početnu strukturu koja se mora strogo pridržavati. Ona izgleda ovako:

Naslov stranice Sadržaj stranice ". Atributi, ako ih oznaka ima, ispisuju se samo na početku oznake. Sadržajem oznake smatra se ono što se nalazi između početka oznake i njenog kraja.

HTML vam omogućuje da opišete blok i inline elemente. Prvi zauzimaju određeno područje u prozoru preglednika, mogu se postaviti apsolutno, odnosno na željeno mjesto u području prikaza HTML stranice i imaju određenu veličinu.

Inline elementi općenito se prikazuju u jednoj niti, odnosno kako su navedeni u datoteci stranice, prikazuju se na ekranu. Na prikaz ukupnog toka može se utjecati kada se stranica učita. Na položaj, vidljivost i druga svojstva blok elemenata može se utjecati u bilo kojem trenutku putem JavaScript koda.

Osim jednostavnih elemenata, HTML nudi opis tablica i obrazaca. Ovi elementi su u velikoj potražnji u "svakodnevnoj izradi web stranica".

Opis stola: oznake TABLE, TR, TD

Pomoću oznake TABLE možete kreirati tablicu, odrediti određeni broj TR redaka i određeni broj TD ćelija u svakom retku. Za razliku od uobičajene tabularne organizacije, zbog osobitosti HTML markupa, tabularna organizacija ograničena je na ovu deklaraciju, stoga, ako programer želi imati pravokutnu tablicu u kojoj je broj stupaca u svim redovima isti, tada mora prati ovo sam.

Načelni stav HTML-a je da radi sve što je navedeno, ali ništa što se ne razumije. U nekim slučajevima broj stupaca u svakom retku tablice nije toliko važan, ali ako trebate spojiti ćelije okomito ili vodoravno, morat ćete sve vrlo pažljivo prebrojati.

U članku je jasno prikazan primjer HTML stranice koja opisuje jednostavnu tablicu.

Ovdje je prikazana tablica od tri retka po tri stupca, au prvom redu je umjesto oznake TD korištena oznaka TH - naslov stupca. Ova dva taga nisu posebno različita, ali sasvim je moguće koristiti prvi za razlikovanje prvog reda tablice, au CSS-u možete priložiti vlastiti stil TH, koji ga razlikuje od ostalih TD-ova.

Opis obrasca: oznake FORM, INPUT

Obrasci su najpopularniji dio HTML oznaka. Pomoću obrazaca možete prenijeti informacije. Zapravo, sama stranica je izlaz informacija, ali forma je njen ulaz.

Primjer HTML stranice koja opisuje jednostavan obrazac:

Postoji mnogo više mogućnosti za korištenje obrazaca, ali ovo su glavne mogućnosti. Možete odrediti polja za unos, dodijeliti im dizajn i rukovatelje za analizu podataka koje je unio korisnik. Možete odrediti skrivena polja i prenijeti pozadinske informacije sa stranice. Možete odrediti gumbe za prijenos informacija, pritiskom na koje se pokreće proces prijenosa informacija.

Korištenje HTML-a

Poznavanje hipertekstualnog jezika je posao u bilo kojoj specijalizaciji u području internetskog programiranja, ali ako trebate pisati programe u PHP-u ili JavaScriptu, onda morate savršeno poznavati HTML + CSS.

PHP jezik je naznačen u prethodnom primjeru. PHP radi na poslužitelju, pa je stranica s ovom formom preletjela sa servera na preglednik s popunjenim poljima. Konkretno, funkcija TestOnBlur spomenuta u oznaci INPUT (rukovatelj događaja onblur) primila je sve parametre kao tekstualna polja.

JavaScript se pokreće u pregledniku, a da bi gumb za slanje podataka natrag na server ispravno radio, odnosno konstrukcija: onclick=jQuery("#to").val("cart"), potrebno je imati ideja ne samo o tome što je jQuery, već i što je #to, val, cart. Točnije, trebate poznavati osnovne HTML oznake i opća pravila za primjenu CSS stilova na njih.

To je sasvim dovoljno da brzo poboljšate svoje kvalifikacije u bilo kojoj specijalizaciji u području internetskog programiranja.

A prevodi se kao "jezik za označavanje hiperteksta". Hipertekst je poseban način kretanja internet stranicama, implementiran u obliku hipertekstualnih poveznica. Klikom na ove poveznice možete se jednostavno kretati strukturom stranice. Prijelazi se u ovom slučaju ne događaju linearno, tj. uvijek imate priliku otići na bilo koju stranicu web mjesta čija je veza trenutno vidljiva.

Markup se odnosi na određena pravila i svojstva koja su dodijeljena elementima stranice. Implementiraju se u obliku takozvanih oznaka. Na primjer, da biste naznačili da određeni tekst na stranici treba biti centriran, možete ga označiti središnjom oznakom. Možete vidjeti HTML kod određene stranice kroz njezin kontekstni izbornik. Na primjer, da biste pristupili ovom kodu u pregledniku Firefox, morate desnom tipkom miša kliknuti unutar stranice i odabrati “Izvorni kod stranice”.

Kako radi HTML kod? HTML kod je skup kratkih oznaka unutar kojih se nalaze elementi stranice. Sav ovaj kod pohranjen je u datoteci s nastavkom .html ili .htm. Kada otvorite takvu datoteku u pregledniku, kod se interpretira, a gotova stranica se prikazuje u prozoru programa. Poznavajući HTML jezik za označavanje, gotovo svatko može stvoriti vlastitu stranicu. Što su oznake zasebne strukture unutar HTML koda. Ovo je običan tekst unutar uglastih zagrada "". Možete vidjeti oznake u HTML kodu gotovo svake stranice. Same oznake se ne prikazuju na stranicama; one prikazuju određeni element koji je kodiran pomoću oznaka. Na primjer, ako na stranici postoji slika, tada njen HTML kod sadrži oznaku img Ograničenja HTML-a Unatoč činjenici da vam HTML kod omogućuje izradu hipertekstualne stranice prilično visoke kvalitete, on ima svoja ograničenja. Stranice koje sadrže isključivo takav kod su statične, tj. nedostaje im dinamike, specijalnih efekata i drugih značajki. Ali oni se mogu predstaviti korištenjem drugih jezika, kao što je Java Script. Velika većina modernih web stranica izrađena je korištenjem dodatnih jezika koji ih čine živahnijima i interaktivnijima.

Natpisi napravljeni monospace fontom kreiraju se pomoću oznaka , i . Rezultati korištenja ovih oznaka obično su identični: jednostruki font s fiksnom veličinom znakova i proredom.

Označiti

Oznaka je element ugrađenog spremnika koji se koristi za umetanje malih fragmenata programskog koda u njega, na primjer, u web dokumentu koji predstavlja vodič za programiranje. Preglednici prikazuju takav kod u monospace fontu (na primjer, Courier New). Ako ero koristite zajedno s elementom

Tag služi za unos teksta bez oblikovanja, odnosno uz očuvanje svih razmaka, tabulatora i prijeloma redaka. Unutar ovog elementa možete primijeniti većinu elemenata za oblikovanje teksta.

Pažnja: U HTML-u se prijelomi redaka, uzastopni razmaci i tabulatori zanemaruju. Nekoliko razmaka u nizu tretiraju se kao jedan razmak.

Primjer: korištenje elemenata i

• Probajte sami"

Unutar elementa, preglednik duplicira svaki razmak ili prijelom retka na koji naiđe, čuvajući vaše izvorno oblikovanje.

If (document.getElementsByClassName) ( x = document.getElementsByClassName("pagination") if (x.length>y) ( x.style.visibility = "hidden"; )

Unutar elementa "pre", preglednik duplicira svaki razmak ili prijelom retka na koji naiđe, čuvajući vaše izvorno oblikovanje.

if (document.getElementsByClassName) ( x = document.getElementsByClassName("pagination") if (x.length>y) ( x.style.visibility = "hidden"; )

Oznake i

Oznaka označava dio koda koji je korisnik unio pomoću tipkovnice. Neki preglednici takav tekst označavaju dodatnom pozadinom.
Oznaka se koristi za generiranje računalnog izlaza, kao što je tekst koji se pojavljuje u prozoru konzole nakon što unesete kontrolnu skriptu. Ovaj rijetko korišteni element jednostavno prikazuje svoj sadržaj u fontu s jednim razmakom kao što je , , .

Primjer: elementi i

• Probajte sami"

Postavite tekst koji korisnik mora unijeti s tipkovnice
kontejnerski element "kbd".

Unesite tekst: Ovo je tekst unesen s tipkovnice

Ovo je tekst koji se nalazi u spremniku "samp".

Označiti

Oznaka se koristi za dodatno isticanje varijabli u programskom kodu. Identificira varijablu u matematičkom izrazu ili programski parametar i obično je prikazan kurzivom.

Primjer: elementi

• Probajte sami"

Kinetička energija tijela:

Kinetička energija tijela:

Wk = mv2/2

Zadaci Završni zadatak

U ovoj ste lekciji naučili o oznakama koje prikazuju svoj sadržaj fontom s jednim razmakom, ističu varijable u kodu i koriste oznaku za prethodno oblikovanje. Svi su oni važni pri radu s matematičkim izrazima i programskim kodom.

Vrijeme je da ponovite što ste naučili i izvršite tri jednostavna zadatka:

Varijabilna

• Odlučite sami"

Koristeći HTML elemente, označite slovo y kao varijablu u gornjoj jednadžbi.

Varijabilna

Jednadžba parabole y = Nx2

Varijabilna

Jednadžba parabole y = Nx2

Prethodno formatirani tekst

• Odlučite sami"

Koristeći HTML element, učinite da se tekst smješten u elementu koda pojavi u pregledniku sa svim razmacima i prijelomima redaka koji su sačuvani kakvi jesu.