Tijekom proučavanja teorijskog materijala o HTML jeziku, neki korisnici imaju pitanje: kako zalijepite html datoteku u web preglednik? Kao i već napisani html kod, pogledati u preglednik. Vidjeti takoreći rezultat obavljenog posla.
Kao što smo se već dogovorili, svoj html kod pišemo u programu Notepad (ali nitko ne zabranjuje korištenje drugih urednika, na primjer, Notepad ++, što je još praktičnije).
I tako, otvorite program Notepad i napišite neki html kod u njega. Uzmimo html kod iz prošle lekcije.
"Opis" content=" Opis stranice">
Istina, takav html kod neće nam dati ništa u pregledniku. Obavezno između oznaka i napišite nešto drugo, na primjer, naslov i par odlomaka:
Sve radi
Dodamo ova tri retka našem html kodu i dobijemo kod poput ovog:
"Opis" content=" Opis stranice">
Provjera rezultata pisanja html koda
Sve radi
Spremite našu datoteku: kliknite datoteku → Spremi kao
U prozoru koji se otvori odaberite mapu u koju ćemo spremiti datoteku, napišite naziv datoteke (npr. dokument), promijenite nastavak datoteke .txt u .html i postavite vrstu datoteke na "Sve datoteke".
Da biste otvorili našu datoteku u pregledniku, prijeđite mišem iznad datoteke, kliknite desnom tipkom miša, u prozoru koji se otvori odaberite "Otvori s" i odaberite preglednik koji koristimo.
Sljedeća lekcija je.
Često nas pitaju o mogućnostima uređivanja html e-pošte. U pravilu s tim nema problema, budući da su usluge slanja pošte opremljene raznim uređivačima pisama.
Ali što ako trebate poslati pisma samo nekoliko primatelja i svaki od njih mora biti individualan? Platiti novac samo za mogućnost korištenja uređivača usluge?
Nije potrebno. Danas ćemo vam reći kako zamijeniti sadržaj slova u izvornom kodu koristeći Sublime Text uređivač teksta kao primjer.
Upoznavanje urednika
U isto vrijeme, da biste vidjeli samo pismo i pratili promjene u njemu, samo trebate otvoriti html datoteku pisma u prozoru preglednika. Nakon spremanja promjena (Ctrl + S) u tekstu koda, samo osvježite stranicu i vidjet ćete promjene koje su napravljene.
Kao što možete vidjeti, Sublime ističe različite formate podataka bojama, u našoj verziji: ružičasta za html oznake, zelena za opcije, žuta, ljubičasta i plava za vrijednost raznih opcija i bijela za tekst.
Zamjena teksta pisma
Zahvaljujući gore navedenim značajkama uređivača, dijete se također može nositi sa zamjenom teksta pisma. Sve što se od vas traži je jednostavno zamijeniti sam tekst, koji je Sublime označio bijelom bojom.
Vrijedno je napomenuti da Sublime, kao i Notepad, automatski resetira formatiranje teksta. Dakle, možete sigurno kopirati bilo koji tekst i zalijepiti ga na pravo mjesto, bit će prikazan u pismu prema parametrima navedenim u kodu.
I još jedan mali savjet, kako biste pronašli željeni tekst u cijelom nizu koda, pritisnite Ctrl + F - nakon toga će se na dnu editora pojaviti polje za pretraživanje teksta.
Ako je potrebno, možete promijeniti stil fonta.
Preporučamo korištenje jednog od sljedećih fontova - Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman To su standardni fontovi koje prepoznaje svaki sustav. Inače bi se vaš tekst na drugom računalu mogao pretvoriti u besmislicu.
Veličina- zamijenite željenu vrijednost u parametru "veličina fonta: 14px;" . Povećajmo veličinu fonta s 14px na 16px.
Boja- vrijednost boje postavljena je u HEX parametru “boja: #323232;” .
Vrijednost boje možete odabrati pomoću jedne od mrežnih usluga, na primjer ovdje - get-color.ru.
Tekst ćemo učiniti sivim - #4F4F4F.
Razmak između redova- po analogiji s veličinom fonta, postavljenom parametrom line-height: 18px;
Format fonta- postavljeno oznakama tekst - mast, tekst - kurziv i tekst - podcrtavanje.
Vrijedno je napomenuti da Sublime prilikom otvaranja oznake automatski dodaje naredbu za zatvaranje oznake. Budi oprezan.
Neka naš tekst bude kurziv.
Prijelom retka- postavljeno oznakom
. Samo umetnite ovu oznaku prije željenog dijela teksta.
Zamijenite tekst, spremite, ažurirajte i gotovi ste.
Umetanje poveznice u tekst
target=”_prazno” - ova naredba za otvaranje veze u novoj kartici. Ako želite da se veza otvori u trenutnoj kartici, jednostavno je izostavite.
tekst-ukras: podcrtano; - naredba pregledniku da podvuče vezu. Ako podcrtavanje nije potrebno, potrebno je napisati tekst-ukras: nema;
U svakom slučaju ovu naredbu obavezno napišite jer će inače svaki preglednik na svoj način odlučiti hoće li podcrtavati ili ne.
Ovo je također obavezna naredba, inače će preglednici prikazati boju kako im odgovara.
Pažnja! Neki klijenti e-pošte pametniji su nego što izgledaju i ako vide poveznicu u tekstu, na primjer, "Možete otići na web stranicu za daljnje proučavanje ...", tada je mogu istaknuti sami i u vlastitom put.
Umetanje/zamjena poveznice u sliku
Slike u pismu nisu pohranjene kao privitci, već se nalaze na poslužiteljima. Sukladno tome, u kodu je slika poveznica na nju, a naredba za njeno dodavanje slična je onoj gore razmotrenoj.
www.example.com”target=”_blank” style=”dekoracija teksta: podcrtano; ”>
boja:#234322; - naredba za postavljanje boje nije relevantna za sliku.
granica="0" - naredba za uokvirivanje slike. Vrijednost 0 uklanja bijeli obrub oko slike, a vrijednosti veće od te će smanjiti odgovarajuću širinu piksela.
Obavezno unesite ovu naredbu. Na primjer, Outlook automatski dodjeljuje okvir slici ako ne registrirate ovu naredbu.
Pronalaženje dijela koda sa slikom bit će lakše u pregledniku. Da biste to učinili, desnom tipkom miša kliknite željenu sliku i odaberite "View Code" (ovo su nazivi ove opcije u Google Chrome, naziv i put do njega mogu se razlikovati u drugim preglednicima). Preglednik će automatski istaknuti pravi dio za vas, kopirati kod i zalijepiti ga u Sublime pretragu.
Prilikom zamjene slike budite oprezni - ako se njezina veličina nove slike razlikuje od veličine prethodne, morate promijeniti sve parametre širina i visina do sadašnjih.
Pogovor
Rekli smo vam o najbezbolnijim opcijama za uređivanje koda e-pošte. Ako trebate napraviti značajnije promjene, toplo preporučujemo da takav zadatak povjerite stručnjaku za izgled ili barem izradite kopiju koda prije uređivanja.
Pročitajte prethodna dva dijela, savladajte treći i bit ćete naoružani svim tehničkim znanjem za puni rad u novom uređivaču!
Kako izvući kod e-pošte iz novog uređivača?
Dakle, radio sam u novoj verziji konstruktora. Općenito, svidio mi se. Međutim, nedostatak je što ne dopušta pretvaranje stvorenog slova, zajedno s tekstom i slikama, u HTML kod. Tužno je. Ali postoji izlaz. Morate sami izdvojiti kod. Kako to učiniti?
Sad ću ti reći. Općenito, imate pismo. Ili predložak pisma. Ako ne, vratite se na čitanje ovog dijela nakon što izradite predložak (ili gotovo pismo na temelju njega).
Od samog početka
Dakle, prođimo kroz cijeli postupak u potpunosti. Od samog početka. Sve radimo u četiri koraka.
Drugi korak. Odaberite spremljeni predložak.
Treći korak. Kliknite na gumb "Pregled". Zatim ću opisati postupak u pregledniku Google Chrome. Klikom na gumb "Pregled" pismo se otvara u obliku u kojem će ga pretplatnik vidjeti.
Četvrti korak. Desnim klikom otvaramo izbornik, gdje odabiremo opciju "View Code". U pregledniku Chrome nakon toga se s donje strane otvara dodatni prozor (“prozor u prozoru”) s HTML kodom slova.
Da bi bilo jasnije, ispod su snimke zaslona svih koraka.
Kako dobiti HTML kod e-pošte
Ako kursorom miša prijeđete preko bilo kojeg retka koda, tada će u prozoru za pregled poruke (imamo ga otvorenog, nije nigdje nestala) biti označeno polje koje ovaj red opisuje.
Krećući se prema gore, dolazimo do samog početka našeg pisma. To može biti prvi tekst, na primjer, "Zdravo, dragi pretplatniče", ili slika - logo vaše stranice.
Moje pismo počinje logom. Stoga ćemo potražiti kod od kojeg počinje opis svih elemenata slova: teksta i slika.
Prozor s kodom može se postaviti vodoravno (na dnu prozora preglednika), okomito (na desnoj strani prozora preglednika) ili kao zasebni samostalni prozor. Ali ne trebamo poseban neovisni prozor, jer ćemo lutati kroz kod i vidjeti koji element slova prikazuje. Pogodnije mi je da se dodatni prozor nalazi na dnu prozora preglednika.
Kako postaviti dodatni prozor
Odabir mjesta dodatnog prozora je jednostavan.
- U gornjem izborniku dodatnog prozora, u desnom dijelu, uz križić, nalazi se element označen s tri okomite točke. Zove se Customize and control DevTools (naziv se prikazuje kada prijeđete pokazivačem miša). Otvaramo ga.
- Odaberite način rada Dock to bottom.
Sve. Sada se naš dodatni prozor nalazi na dnu. U tom slučaju, način rada Elements mora biti odabran u lijevom dijelu gornjeg izbornika.
Kopiranje koda e-pošte iz preglednika
Krenimo sada kroz kod od vrha do dna. Nakon što smo pronašli kod koji istovremeno pokriva sve elemente na stranici našeg pisma, desnom tipkom miša pozivamo izbornik i odabiremo Uredi kao HTML.
Otvara se blok: pravokutnik unutar kojeg se nalazi puno koda. Kopirajte sav kod unutar ovog pravokutnika (prvo pritisnite kombinaciju tipki Ctrl + A, zatim Ctrl + C).
To je to, kopirali smo HTML kod u međuspremnik, odnosno u privremenu memoriju našeg računala. Sada možete spremiti ovaj kod kao predložak na SmartResponder.
Otvara se prazno polje novog predloška u čijem izborniku svakako morate pritisnuti gumb "Izvor" (baš sam danas vidio da je sada taj gumb preimenovan u "HTML kod").
Zatim zalijepimo naš HTML kod tipkovničkim prečacem Ctrl + V . Zatim označite predmet pisma (ovo je obavezno polje) i pritisnite gumb "Spremi". Spreman!
Ispravno spremanje koda e-pošte
Da, to je sređeno. Sada možete dodatno spremiti kod kao HTML datoteku na svoje računalo. Da biste to učinili, samo otvorite Notepad i spremite kod u njega. Zatim promijenite ekstenziju *.txt u *.html i otvorite datoteku. Vidjet ćete kopiju svog pisma u prozoru preglednika.
Strogo govoreći, bolje je za spremanje programskih kodova preuzmite uređivač NotePad++. Uvijek ga koristim jer je Notepad:
a) vizualni prikaz strukture koda;
b) isticanje sintakse (odnosno poveznice između elemenata koda: gdje se što otvara i zatvara i što je napisano između ovih "gdje je što" napisano).
Istina, u 
naučivši kako obraditi kod pisma kreiranog posebno u usluzi slanja e-pošte SmartResponder, čak mi ni NotePad ++ nije pomogao da dobijem prekrasnu oznaku koda. Ovdje se pomoglo Adobe Dreamweaver CC.
Samo zahvaljujući njemu bilo je moguće strukturirati kod pomoću naredbe "Formatiraj izvorni kod".
Sada možete prenijeti kod u NotePad++ i spremiti ga. Iako, ne. Prije spremanja potrebno je kliknuti "Pretvori u ANSI" kako prilikom pregledavanja ne bi bilo škrabotine umjesto teksta.
Također možete odabrati "View" - "Wrap lines". Tada će se sav kod nalaziti na širini stranice, a ne u liniji.
Nakon toga sve bi se trebalo otvoriti i prikazati kao u predlošku pisma na servisu SmartResponder.
Sigurnosna mreža: spremite kod u SmartResponder
Budući da smo kod iz našeg pisma kreiranog u novom uređivaču “isfurali”, budući da ga već imamo, možemo ga spremiti u SmartResponder servis radi sigurnosti. Za što? Da biste na temelju njega stvorili nova slova, promijenite ih i, što je najvažnije, upotrijebite ih na drugim resursima (podsjećam vas da u novom uređivaču jednostavno nema takvih značajki).
Da biste to učinili, kôd kopiran iz preglednika Google Chrome mora se zalijepiti u stari SmartResponder konstruktor.
Ovo se lako radi.
- Na kartici "Pošta" odaberite odjeljak "Popis predložaka pisama".
- Kliknite gumb "Stvori predložak".
- Odaberite vrstu "Šarena HTML e-pošta (stari uređivač)" i kliknite "Dalje".
- U uređivaču koji se otvori, u izborniku alata za izradu pisma kliknite na gumb "HTML kod".
- Zalijepite naš kod (pritisnite Ctrl + V). Možemo ponovno kliknuti na gumb “HTML code”, odnosno isključiti način prikaza koda i uključiti način prikaza izgled slova.
- Obavezno popunite polje "Predmet pisma" (na ruskom: dajemo naziv našem predlošku).
- Pritiskam tipku "Spremi".
To je zapravo sve što sam vam htio reći o novom uređivaču SmartResponder nakon što sam u njemu napravio svoje prvo slovo.
Želim reći da prije uopće nisam bio upoznat s uslugom SmartResponder. Odnosno, nisam imao nikakvih vještina rada ni u starom ni u novom uredniku. Ali prijavio sam se i shvatio. Pa, sada znate kako raditi u novom SmartResponder konstruktoru.
A koje servise za izradu i slanje pisama koristite u svom radu?
Bok svima!
Rustem nas je napustio za Soči, da uživamo u toploj morskoj klimi. Alina i ja smo dobili naputak da nastavimo priču o Email marketingu. Pa, ovaj tjedan je moj post. Reći ću vam o OpenRateu.
Otvorena stopa pisama (Open Rate na engleskom) jedna je od najvažnijih. Poslali ste 10.000 pisama, a samo 10 ljudi ih je pročitalo. OpenRate je bio 0,1%. Tuga! Ali ako ima 2000 ljudi, onda nije loše - 20%. Ali postavlja se pitanje kako saznati koliko je ljudi pročitalo pismo? Usluge kao što su Unisender, Mailchimp itd. pružaju ove informacije u sučelju. Pokušajmo otkriti kako dolaze do ovih podataka. Srećom, postoji nekoliko načina - samo dva.
Opcija 1. Slika jednog piksela.
Metoda je krajnje jednostavna! Usluga u e-poštu ubacuje prozirnu sliku veličine 1×1 piksela. Kada korisnik otvori e-poštu, slika se učitava u preglednik. U isto vrijeme, čini se da se slika nalazi na poslužiteljima "poštara". Kada stigne zahtjev za sliku (zahtjev poslužitelju), usluga može pratiti koja je slika zatražena. I da zaključim - koje pismo, s koje mailing liste je otvoreno.
Usput, na ovaj način možete pratiti otvaranje pojedinačnih slova tako da umjesto adrese slike ubacite GoogleAnalytics kod u kod. A onda će se broj otvaranja pokazati u njegovoj statistici.
Nedostaci takvog praćenja: ne radi u svim sučeljima programa za poštu (i programa za poštu), a metoda je također primjenjiva samo ako je vaše pismo u HTML format. Uostalom, ovo je određeni html kod. U običnoj tekstualnoj poruci metoda neće raditi.
Opcija 2. Slijedite veze.
Drugo rješenje također je na površini. Označili smo linkove u pismu, dodali poseban kod na adresu svakog linka. Ako ih je netko pratio do naše stranice, onda je otvorio pismo. Po kodu možete prepoznati s koje je mailing liste korisnik došao. Ova metoda nadopunjuje prvu opciju: ako nije uspjelo, statistika će se razjasniti klikom na vezu.
Usput, jednom je postojala ideja da se prati stopa otvorenih pisama ne za slanje poštom, već za ona koja šalju prodavači s komercijalne ponude. Otkriven je niz stranih servisa koji u konačnici rade na približno istim principima.
To je u biti to. Uspješan radni tjedan!
Samo će ljubavnici preživjeti
Značajke oglašavanja namijenjenog djeci
retuširanje starih fotografija u photoshopu retuširanje starih fotografija
Što je NPO: dešifriranje, definiranje ciljeva, vrste aktivnosti Ima li neprofitna organizacija pravo
Gleb Nikitin Prvi zamjenik