>> Daven Farnham: Dzisiaj mam zamiar powiedzieć trochę o HTML,
Hypertext Markup Language.
Widzisz HTML wszędzie te dni.
W rzeczywistości, jeśli to oglądasz wideo w przeglądarce, jesteś
widząc HTML teraz.
HTML nie jest językiem programowania, raczej, że jest to język znaczników używany przez
przeglądarki internetowe do renderowania stron w Internecie.
>> Więc możesz zapytać, jak dokładnie jest pisanie strona w HTML różne
od pisania programów w programowaniu język jak C?
Cóż, C jest językiem o bardzo surowe składniowe zasady, które muszą być
opracowywane zanim uruchomić.
Jeśli kiedykolwiek zapomniałeś włączyć średnik na końcu instrukcji w
Twój kod C, wiesz, o czym mówię o w odniesieniu do ścisłej składni.
>> Przeglądarki internetowe są jednak nieco bardziej wyrozumiały, jeśli chodzi o HTML.
Nawet jeśli nie jest składniowo HTML poprawne, strona może być jeszcze
wyświetlane przez przeglądarkę, ale to może nie wyglądają jak przeznaczone.
Dlatego zawsze najlepiej przestrzegać zasad.
Najlepszym sposobem, aby dostać się intuicją o tym, jak to wszystko działa
przejść przez przykład.
>> Więc co my tu mamy jest podstawowym plan na stronie internetowej.
Prawdopodobnie zauważyłeś, wiele rzeczy w nawiasach kątowych.
Cóż, to są tylko tagi.
Tagi zasadzie informuje przeglądarek internetowych że, hej, coś
jest na Twojej drodze.
Pamiętaj jednak, przy każdym otwarciu tag, trzeba go zamknąć, gdy jesteś
wykonane przy użyciu go.
>> Tak na przykład, otworzyć sekcję kodu z otwartym
Korpus wspornika, blisko wspornika.
Następnie dodać jakiś tekst, w tym przypadku, moim pierwsza strona internetowa, a następnie, gdy poszedłem do
zamknąć ten rozdział, używam prawie identyczny tag chyba z tego czasu
ukośnik przed ciałem.
W ogóle, to jest format jesteś będzie korzystać, gdy otwierasz
i zamykanie tagów.
Razem, otwarte tag oraz znacznik końcowy komponować, co nazywa elementem.
>> Jeśli spojrzeć na pierwszą linię, będziesz zobacz wykrzyknik następnie
DOCTYPE html.
To jest naprawdę tylko mówi przeglądarkę że plik jest strona internetowa
napisane w HTML.
Tag HTML zasadniczo mówi, oto niektóre HTML.
To mamy z głowy tag Tytuł tag wewnątrz niego.
Tag głowy można myśleć jako zawierający kod HTML, który przychodzi do
Większość jest Twoja strona internetowa rzeczywista zawartość.
>> Ogólnie rzecz biorąc, można umieścić swój tytuł strona tutaj, choć są tacy,
inne znaczniki, które mogą się pojawić również tutaj.
Następnie przychodzi ciało swojej stronie internetowej, Rzeczywista mięso i kości z Twojej strony.
W naszym przykładzie mamy tylko umieścić proste zdanie, moja pierwsza strona internetowa,
które, jeśli prowadzimy naszą witrynę, będzie wyglądać trochę coś takiego.
Strona internetowa nie jest zbyt dziwne, ale nie martw się.
Będziemy świerk go wkrótce.
>> Więc przede HTML, damy Ci bardzo Podstawowy szablon dla strony internetowej,
nic specjalnego, tylko gołe kości.
Ale jeśli mam tworzenia stron internetowych, Co zrobić, jeśli chcę dodać
obraz, powiedzmy sobie?
Cóż, może to zrobić.
Istnieje kilka sposobów, aby dodawać zdjęcia do swojej strony.
Jeśli obraz jest w tym samym folderze, Twój plik HTML, można połączyć się
obraz poprzez drogę tak.
>> Otwierasz tagiem obrazu po przez w atrybutu alt w
źródło obrazu.
Wartość atrybutu alt jest tylko niektóre tekst alternatywny w przypadku użytkownik nie może
zobacz zdjęcie.
Alternatywnie, można również odwołują się do zdjęć za pośrednictwem pełnego adresu URL, takie jak ten.
Teraz, że strona nie istnieje naprawdę, ale gdyby nie było obraz
mnie pod tym adresem, można używać URL źródła do włączenia
jego obraz na mojej stronie internetowej.
Tak czy inaczej, w końcu z dużo ładniejsza strona, coś takiego.
>> Cóż, to jest bardzo fajne, ale rodzaj z chcesz tekst również tutaj.
Więc po prostu dodać coś super proste powyżej
obraz, jak w nagłówku.
Wszystko robiłem do tej pory korzystać z nagłówka tag H1, a przerwa slogan, br.
Tag nagłówek sprawia trochę czcionkę nieco większe i bardziej widoczne.
Tag linia przerwy, z drugiej strony, jest całkiem ciekawie.
W przeciwieństwie do większości innych znaczników, nie musisz Znacznik otwierający i zamykający przerwa, po prostu
pokazany powyżej.
To dlatego, że przerwa nie ma treści i jest w związku z tym, puste elementem.
>> Puste elementy, takie jak to, można otworzyć i jednocześnie, po prostu zamknij
w tym ukośnik w koniec początkowej deklaracji.
Więc teraz moja strona wygląda trochę coś takiego.
Lepiej, ale to niby czuje jak ślepy zaułek.
Nie ma dokąd pójść na bok od strony głównej.
No to naprawić przez tym linkiem.
>> Co mam zamiar zrobić, to użyć tutaj atrybut oznaczona i zrobić
Obraz link do, powiedzmy, CS50 telewizor.
W ten sposób, gdy ktoś kliknie na mnie, ich przeglądarki będą dotyczyć
inny, prawdopodobnie więcej użyteczne, strona internetowa.
Miałem w celu zminimalizowania rozmiaru tekst trochę dlatego, że nasza strona internetowa jest
coraz bardziej zaawansowane.
Ale miejmy nadzieję, że to jeszcze jasne.
Moja strona wygląda dokładnie tak samo tylko teraz, gdy klikam na zdjęcie,
moja przeglądarka otworzy kolejny zakładka na stronie internetowej CS50.tv.
>> Wreszcie, powiedzmy, mam zamiar stylu ta strona później za pomocą CSS.
CSS tzw Arkusz stylów kaskadowych.
I to w zasadzie zapewnia efektywne sposób edytować i styl
podobne bloki kodu.
Chcę rozpocząć organizowanie mój HTML na łatwiej projektować później.
Tutaj skonfigurować dwa różne rodzaje identyfikatory, które pomogą zorganizować mój kod.
Użyłem atrybut ID wewnątrz podział lub div tag, i użyłem
Atrybut wewnątrz klasy kolejny znacznik div.
>> Atrybuty id i class działają podobnie.
Jedyną różnicą jest to możesz mieć tylko jeden element konkretny identyfikator, ale
dowolna liczba elementów może podzielić klasę.
Tak na przykład, można użyć klasy obraz wiele razy, ale nie mogę
utworzyć inny podział z ID górze.
Mimo, że nie poszły w CSS, inny język powszechnie używany
obok HTML, raz zaczynam stylizacji mój kod CSS, można z nich korzystać
atrybuty organizacyjne do wpływu estetyka mojej stronie internetowej.
>> Wszystko w ramach podziału górę będą miały podobne stylizacje lub dowolny
Druga grupa HTML do grupy I Klasa obraz będzie dzielić podobny wygląd.
Jest to o wiele łatwiejsze niż próbuje edytować i zdjęcia w stylu lub bloki
tekst indywidualnie.
>> Więc poszliśmy na podstawach, jak zrobić stronę internetową z HTML.
HTML ma kilka innych funkcji, zbyt że gdy w połączeniu z innymi językami
jak CSS i JavaScript, może naprawdę by strony wyróżniać.
Najlepszym sposobem, aby się komfortowo HTML jest po prostu poeksperymentować z nim,
zobaczyć, co działa, a co nie.
>> Nazywam się Daven Farnham.
To CS50.
>> Tak na przykład, można użyć Klasa obiektu -
Nie, nie jest tak wiele atrybutów.
Nazywam się Daven Farnham.
To jest CS 650.
Chcę powiedzieć, CSS.
To jest CSS.