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.