Przewodnik dla początkujących do budowania stron HTML5 / CSS3

Ten artykuł jest częścią naszego „Seria samouczków HTML5 / CSS3” - dedykowane, aby pomóc Ci stać się lepszym projektantem i / lub deweloperem. Kliknij tutaj aby zobaczyć więcej artykułów z tej samej serii.

HTML5 i CSS3 ogarnęły burzę w ciągu zaledwie 2 lat. Przed nimi było wiele zmienionej semantyki w sposobie, w jaki projektanci stron internetowych mają tworzyć strony internetowe, a wraz z ich nadejściem pojawia się mnóstwo niesamowitych pomocy, takich jak alternatywne media, znaczniki w stylu XML i progresywne atrybuty wejściowe dla projektantów stron internetowych, aby osiągnąć marzycielski funkcje takie jak animacja.

Chociaż większość programistów wydaje się prezentować potencjalnie skomplikowane wersje demonstracyjne, HTML5 / CSS3 nie są tak naprawdę nauką o rakietach, a ja poprowadzę Cię przez proces relaksacji, aby zbudować standardową stronę HTML5 / CSS3 z wyczerpującym, ale dogłębnym wyjaśnieniem i tada! Bonusy, takie jak zasoby do nauki i darmowe szablony HTML5, są dostępne dla Ciebie, więc skorzystaj z okazji, aby rozpocząć swoją podróż HTML5!

Zmiany między HTML4 a HTML5

Być może zastanawiasz się, dlaczego nawet ważne jest przejście na HTML5. Istnieje wiele powodów, ale głównie dlatego, że będziesz praca ze światowymi standardami internetowymi jak każdy inny projektant. W ten sposób znajdziesz więcej wsparcia online i swojego strony internetowe będą poprawnie wyświetlane w nowoczesnych przeglądarkach które są stale ulepszane.

(Źródło obrazu: W3C)

Porównanie między HTML4 i HTML5 jest trudne do wykrycia na poziomie powierzchni. Przeglądając nową wersję HTML5, możesz zobaczyć polecane elementy i poprawione procedury obsługi błędów. Deweloperzy przeglądarek szczególnie lubili nowe specyfikacje renderowania domyślnych stron internetowych.

Co więcej, HTML5 to konwersja naszej nowoczesnej przeglądarki internetowej. Dzięki tym nowym specyfikacjom sieć jako całość jest teraz postrzegana jako platforma aplikacji dla HTML (zwłaszcza HTML5), CSS i JavaScript do zbudowania. Również ten system elegancko tworzy harmonię między projektantami stron internetowych a programistami ustalając wspólne standardy, które powinny spełniać wszystkie przeglądarki.

Dodatkowo stworzono wiele elementów reprezentują nowe media cyfrowe. Obejmują one i które są ogromne dla obsługi multimediów. W niektórych przeglądarkach możesz wykonać walidację formularza bezpośrednio w HTML. Przyznaje się, że wciąż istnieje duże zapotrzebowanie na jQuery, ponieważ jest wielu programistów, którzy jeszcze nie rozpoznali funkcji. Jeśli chcesz uzyskać listę tagów, sprawdź tabelę W3Schools, aby dowiedzieć się więcej o nich.

Bare HTML5 Skeleton

Uważam, że najłatwiej zrozumieć każdy temat zanurkuj w prawo. Dlatego skonstruuję bardzo prosty szablon szkieletu HTML5 dla strony internetowej. Dodałem kilka nowszych elementów, które mam nadzieję skategoryzować nieco później.

        
 
 
Witamy, wszyscy!
  
 
 
 
trochę treści tutaj.
 
 
 
ale niektóre tutaj również!
 
 
  
   

Od razu nie różni się to od standardowej strony internetowej HTML4. Możesz zauważyć, że my nie musisz dodawać żadnych samozamykających się tagów. To naprawdę wspaniała wiadomość, ponieważ pozwoli zaoszczędzić wiele czasu na projektach rozwojowych.

Dla tych, którzy nie wiedzą, w wersjach XHTML było wiele elementów oznaczonych samozamykający się. Kończy się to ukośnikiem przed operatorem „większy niż”, aby oznaczać, że nie trzeba umieszczać innego tagu zamykającego w innym miejscu. Na przykład, aby utworzyć tag meta słów kluczowych, którego chcesz użyć bez potrzeby zamykania gdzie indziej.

Ta zasada nadal obowiązuje w HTML5. Ale teraz ty nie potrzebujesz nawet dodatkowego ukośnika! jest całkowicie ważny, chociaż możesz kontynuować używanie standardu XHTML / XML. Dla wszystkich przeglądarek zgodnych ze standardami oba elementy będą renderowane w ten sam sposób.

Definiowanie naszych obszarów stron

Większość naszego nowego kodu nie powinna być zbyt szokująca. Nasz doctype jest zabawnie prostszy niż kiedykolwiek, nie potrzeba nadmiernych atrybutów ciała, a informacje w naszym nagłówku są wyraźnie oznaczone. Idąc dalej chciałbym skupić twoją uwagę na treściach w naszym etykietka. Obejmuje to całą strukturę strony głównej. Celowo użyłem kilku ładnych tagów HTML5, aby wskazać, w jaki sposób możesz włączyć je do własnej pracy.

Najpierw zobaczysz całą stronę zamknięty w div etykietka. Oznaczyłem to identyfikatorem obwoluta, co oznacza, że ​​obejmuje całą naszą zawartość strony. To jest przydatne do ustawienia maksymalnej szerokości lub zawartości pozycji na ekranie. Następnie złamałem stronę na 3 podstawowe elementy - jeden

, rdzeń

, i krótki

Przewodnik dla początkujących dla Flocka, przeglądarki mediów społecznościowych

Przewodnik dla początkujących na temat rozwoju systemu iOS Interfejs - część I

Podręcznik dla początkujących dotyczący konfigurowania systemu Windows 7 Media Center