Wprowadzenie do tworzenia stron WWW

Powrót w moim dni (Dobrze, zanim mój dzień), Zawód Web Developer był niski jeden. Uplasował się poniżej szczeniąt Hater ale przede Yankees wentylator na skali zawodowej honoru. Z powodu wszystkich znaczników i obrazków przejrzystości użyliśmy, my były postrzegane jako surowych hakerów bez poczucia estetyki.

Dobrze, możemy nadal brakuje w sensie estetycznym, ale jako Web rozwinęła więc ma zawodu web developer. Te dni są niezliczone narzędzia możemy wykorzystać, aby dobrze napisane, zgodne ze standardami, i piękne (Dobrze, a może nie, że ostatni) strony internetowe. Większość wielkich witryn korzystają dziś (wtyczka bezwstydny: w tym ten jeden) budowane są za pomocą tych narzędzi.

Nasze grono narzędzi na koniec przeglądarki pozwoliły nam stworzyć rzeczy w Internecie, które były nie do pomyślenia tylko 10 lat temu, takich jak niezliczone sieci społecznych twierdzi, że jest to najlepszy sposób, aby tracić czas, “gorący” tech firmach twierdzą, że zrewolucjonizowały coś, co już zostało zrobione tysiąc razy, i Angry Birds klony twierdząc, że tylko nieznacznie gorzej niż oryginał. Wszystko w internecie. Więc może te narzędzia nie poszły do ​​największego z zastosowań.

Więc co to są te niesamowite narzędzia Rozmawiałem o? Liderem był (szczerze niesamowite) języki zwane HTML5, CSS3, i JavaScript, które nick 3 jeźdźców webocalypse. Oto spojrzenie na każdego:

HTML

HTML (właściwie znany jako Hypertext Markup Language; można zobaczyć, dlaczego ludzie, którzy nie chcą wyglądać źle wystarczy użyć skrótu) to Język używany do stron internetowych rozłożyć. Kliknij prawym przyciskiem myszy na tej stronie, a następnie kliknij “Zobacz Źródło”. To, że ta strona HTML korzysta.

Istotnie, HTML jest kilka tagi, które przeglądarka interpretuje i określa się. Na przykład, spojrzeć na ten kod HTML:

<p>Nie wiem o tobie, ale lubię naciskania przycisków.</p>

<br>

<przycisk>Kliknij mnie!</przycisk>

Kod HTML jest tekst zawinięty w pkt (the <p> tag zaczyna pkt, the </p> znacznik kończy się akapit.) Nie ma przerwy w linii (the <br>) a następnie przycisk, klikając syta. Twoja przeglądarka położy ją na ekranie dla Ciebie.

Więc to jest wszystko dobrze. Ale jeśli nie masz nic, ale HTML, you get a webpage that looks like it came straight out of the 1990’s. Nie bardzo dobrze wyszedł z tej dekady tak (fryzury, muzyka, itd.) Ale poczekaj! Jest więcej!

CSS

Kolejny skrót. Lato. CSS oznacza Cascading Style Sheets, który jest trochę mylące, ponieważ tak naprawdę nie kaskadowo (cokolwiek to znaczy… jest to kod komputerowy, nie wodospad!) CSS Język używany do stron typu. To, zbyt, jest interpretowany przez przeglądarkę.

CSS i HTML razem pracować – HTML sprawia, że ​​układ strony jest, CSS daje mu jego talent. Wyobraź sobie, budowa domu: HTML zapewnia szare, ale niezbędne w drewniane ramy, CSS dodaje kolory neonowe i ekscentryczne meble.

CSS jest dość prosty język: dla pewnej zmiennej HTML (jak w pkt), można określić wartości dla klas różnych stylów. Twoja przeglądarka odczyta CSS i stosować go wszystkich znaczników HTML w celu dopasowania. Na przykład:

p {

kolor: czerwony;

font-size: 16px;

}

Więc każdy pkt (rzeczy w HTML <p> tagi) będzie miał czerwony czcionki i być 16 pikseli na rozmiar. Jeśli zauważyłeś,, są to jedne z tych samych stylów można używać w programie Microsoft Word i innych aplikacji.

Teraz Twoje strony są określone i wyglądają dość. Ale tutaj jest rzeczą: to wszystko robią. Oni po prostu siedzieć i patrzeć dość. Który jest wielki i wszystko, ale użytkownicy sieci chcą więcej. Chcą fantazyjne animacje. Chcą, pop-upy (Dobrze, Może oni z powrotem w 2002, ale to dygresja.) Chcą przyciski, które będą robić rzeczy po kliknięciu na nich.

O tym ostatnim – to jest problem. Możesz zrobić <przycisk> w formacie HTML, i można go kliknąć cały tydzień, ale to nie robi nic w najbliższym czasie. Jeśli chcesz, aby przycisk, no nie wiem, przenieść słonia po ekranie i atakować coś, then you need something more.

JavaScript

JavaScript jest nie akronim, Jeśli zastanawiasz. Nazwali go JavaScript, ponieważ wyglądał jak język programowania o nazwie Java, co jest dziwne, bo to nie. W każdym razie, JavaScript jest a proper programming language that causes all the dynamic effects można zobaczyć w internecie.

Jak w każdym języku programowania,, JavaScript jest szereg poleceń, które sprawiają, zmiennych i wykorzystują funkcje. Fajne strony o JavaScript (dobrze, cool, jak język programowania może być) jest to, że można uzyskać dostęp do tych elementów HTML (jak ust i przycisków) i stylów CSS (jak kolor i rozmiar czcionki) i zmienić je. Spójrz na ten kod:

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – the $ sign tells the browser to find all matching elements, and the ‘p’ means it needs to choose paragraphs (remember the <p> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to blue.

What I find interesting (ponownie, this is all from the viewpoint of a “webdev”) is how elegantly the three languages work together. Że ostatnia linia kodu JavaScript w interakcje z HTML strony i CSS używane do jej styl. To nie tak jak te języki są tylko różne elementy tej samej rzeczy – są one jednym i tym samym, różne strony tej samej niesamowitej maszyny.

Dźwięk fascynujące? Myślę, że tak. To tylko część piękno internecie.