Wprowadzenie do HTML5, CSS, JavaScript, jQuery
HTML5, CSS, JavaScript, jQuery Szybki Start dla .Net Core – Seria Web Developer część 2
Czego się nauczysz * Poznasz podstawy HTML * Poznasz podstawy CSS * Poznasz podstawy JavaScript * Poznasz podstawy jQuery
Wymagania
Chęć nauki i dobrej zabawy !!!
Dla kogo jest ten kurs
- Początkujący twórca stron internetowych
- Początkujący programista AspNet Core
- Początkujący programiści AspNet Mvc
Opis
Witam w szybkim kursie tworzenia stron WWW dla początkujących z HTML5, CSS, JavaScript i Jquery.
Jeśli zaczynasz ten kurs, to wiedz że nauczysz się pewnych umiejętności związanych z tworzeniem stron internetowych. Ten kurs w szczególności pomoże Ci nauczyć się HTMLa, stylizacji strony za pomocą CSSa, a także obsługi kodu po stronie klienta za pomocą JavaScriptu i Jquery. Celem tego kursu nie jest nabycie kompletnej wiedzy, ale umożliwienie Ci w ciągu kilku godzin zrozumienia podstawowych pojęć HTML, CSS, JavaScript i Jquery.
Zamiast pokazywać wiele slajdów, skupimy się w większości na praktycznych przykładach. Przejdziemy przez prosty przykład strony internetowej i pokażemy, jak zbudować HTML, zmienić sposób, w jaki on wygląda za pomocą CSS, a następnie w końcu napisać kod do rzeczywistej interakcji z użytkownikiem oraz z żądaniami sieciowymi za pomocą JavaScriptu.
Dzięki poznaniu podstaw i ich wspólnej pracy możesz zacząć szybko działać. Podczas tego kursu zapoznam Cię z podstawami tworzenia stron WWW po stronie klienta, pokazując podstawy budowania stron internetowych za pomocą HTML, CSS, JavaScript i jQuery.
Seria Web Developer :
część 1: Budowanie pierwszej aplikacji ASP.NET Core 2.1 MVC z Visual Studio 2017
część 2: HTML5, CSS, JavaScript, jQuery Szybki Start dla .Net Core
część 3: Budowanie aplikacji ASP.NET Core MVC Entity Framework Core, Bootstrap, i Angular
HTML
Css Stylizacja HTMLa
JavaScript
jQuery
Z Całkiem Innej Beczki
HTML5 wprowadził szereg nowych elementów strukturalnych, które mają na celu ułatwienie tworzenia bardziej semantycznych i dostępnych stron internetowych. Oto niektóre z podstawowych elementów struktury w HTML5 wraz z ich zastosowaniami:
<header>:
Zastosowanie: Reprezentuje nagłówek strony lub sekcji. Często zawiera tytuł, logo i elementy nawigacyjne.
<nav>:
Zastosowanie: Przeznaczony do zawierania głównych elementów nawigacyjnych strony, takich jak menu, linki do innych stron lub sekcji.
<section>:
Zastosowanie: Reprezentuje logicznie grupowaną sekcję zawartości, która zazwyczaj posiada własny nagłówek.
<article>:
Zastosowanie: Używany do określenia niezależnej, samodzielnej zawartości, takiej jak artykuł, post na blogu czy komentarz. Może być używany wewnątrz <section>.
<aside>:
Zastosowanie: Przeznaczony dla treści, które są powiązane z główną zawartością, ale nie są jej integralną częścią, takie jak boczne paski, reklamy, przewodniki.
<footer>:
Zastosowanie: Zawiera stopkę strony lub sekcji. Może zawierać informacje o autorze, prawa autorskie, linki do dokumentów prawnych, informacje kontaktowe itp.
<main>:
Zastosowanie: Główny kontener dla unikalnej zawartości strony. Powinien zawierać treść, która jest bezpośrednio powiązana z głównym tematem strony.
<figure> i <figcaption>:
Zastosowanie: <figure> to kontener na elementy multimedialne takie jak obrazy, diagramy, zdjęcia, kod; <figcaption> umożliwia dodanie opisu lub legendy do tego, co zawiera <figure>.
<details> i <summary>:
Zastosowanie: <details> tworzy widget, który użytkownik może rozwinąć lub zwinąć, aby zobaczyć więcej lub mniej informacji. <summary> określa widoczny domyślnie nagłówek dla zawartości <details>.
<mark>:
Zastosowanie: Używany do wyróżnienia lub podkreślenia części tekstu, na przykład wyników wyszukiwania lub kluczowych słów.
Każdy z tych elementów odgrywa specyficzną rolę w strukturze strony, umożliwiając tworzenie bardziej uporządkowanych i semantycznie znaczących dokumentów HTML. Wspomaga to zarówno dostępność, jak i SEO (Search Engine Optimization), ponieważ pomaga wyszukiwarkom lepiej rozumieć strukturę i zawartość strony.
<header>:
Zastosowanie: Reprezentuje nagłówek strony lub sekcji. Często zawiera tytuł, logo i elementy nawigacyjne.
<nav>:
Zastosowanie: Przeznaczony do zawierania głównych elementów nawigacyjnych strony, takich jak menu, linki do innych stron lub sekcji.
<section>:
Zastosowanie: Reprezentuje logicznie grupowaną sekcję zawartości, która zazwyczaj posiada własny nagłówek.
<article>:
Zastosowanie: Używany do określenia niezależnej, samodzielnej zawartości, takiej jak artykuł, post na blogu czy komentarz. Może być używany wewnątrz <section>.
<aside>:
Zastosowanie: Przeznaczony dla treści, które są powiązane z główną zawartością, ale nie są jej integralną częścią, takie jak boczne paski, reklamy, przewodniki.
<footer>:
Zastosowanie: Zawiera stopkę strony lub sekcji. Może zawierać informacje o autorze, prawa autorskie, linki do dokumentów prawnych, informacje kontaktowe itp.
<main>:
Zastosowanie: Główny kontener dla unikalnej zawartości strony. Powinien zawierać treść, która jest bezpośrednio powiązana z głównym tematem strony.
<figure> i <figcaption>:
Zastosowanie: <figure> to kontener na elementy multimedialne takie jak obrazy, diagramy, zdjęcia, kod; <figcaption> umożliwia dodanie opisu lub legendy do tego, co zawiera <figure>.
<details> i <summary>:
Zastosowanie: <details> tworzy widget, który użytkownik może rozwinąć lub zwinąć, aby zobaczyć więcej lub mniej informacji. <summary> określa widoczny domyślnie nagłówek dla zawartości <details>.
<mark>:
Zastosowanie: Używany do wyróżnienia lub podkreślenia części tekstu, na przykład wyników wyszukiwania lub kluczowych słów.
Każdy z tych elementów odgrywa specyficzną rolę w strukturze strony, umożliwiając tworzenie bardziej uporządkowanych i semantycznie znaczących dokumentów HTML. Wspomaga to zarówno dostępność, jak i SEO (Search Engine Optimization), ponieważ pomaga wyszukiwarkom lepiej rozumieć strukturę i zawartość strony.
CSS (Cascading Style Sheets) jest używany do stylizacji elementów HTML i tworzenia atrakcyjnych wizualnie stron internetowych. Oto kilka podstawowych sposobów, w jakie można używać CSS do stylizacji elementów HTML:
1. Selektory i Deklaracje:
Selektory: Pozwalają wybrać elementy HTML, które chcesz stylizować. Na przykład, p jako selektor wybierze wszystkie elementy <p> (akapity).
Deklaracje: Składają się z właściwości i ich wartości. Na przykład, color: red; zmienia kolor tekstu na czerwony.
2. Podłączanie Arkuszy Stylów do HTML:
Można dołączyć CSS do dokumentu HTML na trzy sposoby:
Wewnętrzny (Inline): Bezpośrednio w tagach HTML za pomocą atrybutu style.
Wewnętrzny (Internal): W sekcji <head> dokumentu HTML, używając tagu <style>.
Zewnętrzny (External): Linkując zewnętrzny arkusz stylów za pomocą tagu <link> w <head>.
3. Stylizacja Tekstu i Fontów:
Zmiana czcionki, rozmiaru, koloru, wyrównania tekstu itp., np. font-family, font-size, color, text-align.
4. Kontrola Układu:
Stylizowanie i kontrola układu elementów za pomocą właściwości takich jak margin, padding, border, width, height.
5. Flexbox i Grid:
Zaawansowane techniki układu, takie jak Flexbox (display: flex;) i CSS Grid (display: grid;), umożliwiają tworzenie responsywnych układów.
6. Pseudoklasy i Pseudoelementy:
Umożliwiają stylizowanie określonych stanów elementu (np. :hover, :focus) lub części elementu (np. ::before, ::after).
7. Responsywność i Media Queries:
Używanie zapytań medialnych (@media) do tworzenia stylów, które zmieniają się w zależności od rozmiaru ekranu i innych warunków.
8. Animacje i Przejścia:
Tworzenie animacji i efektów przejścia za pomocą @keyframes, animation i transition.
9. Zmienne CSS:
Użycie zmiennych CSS (--nazwa-zmiennej) do przechowywania wartości, które można wielokrotnie wykorzystywać i łatwo zmieniać.
10. Kaskadowość i Dziedziczenie:
Zrozumienie, jak CSS stosuje style (kaskadowość) i w jaki sposób elementy dziedziczą style od swoich rodziców.
Pamiętaj, że CSS jest bardzo potężnym narzędziem, które pozwala na wiele kreatywności i kontroli nad wyglądem strony internetowej. Praktyka i eksperymentowanie są kluczem do nauki i opanowania CSS.
1. Selektory i Deklaracje:
Selektory: Pozwalają wybrać elementy HTML, które chcesz stylizować. Na przykład, p jako selektor wybierze wszystkie elementy <p> (akapity).
Deklaracje: Składają się z właściwości i ich wartości. Na przykład, color: red; zmienia kolor tekstu na czerwony.
2. Podłączanie Arkuszy Stylów do HTML:
Można dołączyć CSS do dokumentu HTML na trzy sposoby:
Wewnętrzny (Inline): Bezpośrednio w tagach HTML za pomocą atrybutu style.
Wewnętrzny (Internal): W sekcji <head> dokumentu HTML, używając tagu <style>.
Zewnętrzny (External): Linkując zewnętrzny arkusz stylów za pomocą tagu <link> w <head>.
3. Stylizacja Tekstu i Fontów:
Zmiana czcionki, rozmiaru, koloru, wyrównania tekstu itp., np. font-family, font-size, color, text-align.
4. Kontrola Układu:
Stylizowanie i kontrola układu elementów za pomocą właściwości takich jak margin, padding, border, width, height.
5. Flexbox i Grid:
Zaawansowane techniki układu, takie jak Flexbox (display: flex;) i CSS Grid (display: grid;), umożliwiają tworzenie responsywnych układów.
6. Pseudoklasy i Pseudoelementy:
Umożliwiają stylizowanie określonych stanów elementu (np. :hover, :focus) lub części elementu (np. ::before, ::after).
7. Responsywność i Media Queries:
Używanie zapytań medialnych (@media) do tworzenia stylów, które zmieniają się w zależności od rozmiaru ekranu i innych warunków.
8. Animacje i Przejścia:
Tworzenie animacji i efektów przejścia za pomocą @keyframes, animation i transition.
9. Zmienne CSS:
Użycie zmiennych CSS (--nazwa-zmiennej) do przechowywania wartości, które można wielokrotnie wykorzystywać i łatwo zmieniać.
10. Kaskadowość i Dziedziczenie:
Zrozumienie, jak CSS stosuje style (kaskadowość) i w jaki sposób elementy dziedziczą style od swoich rodziców.
Pamiętaj, że CSS jest bardzo potężnym narzędziem, które pozwala na wiele kreatywności i kontroli nad wyglądem strony internetowej. Praktyka i eksperymentowanie są kluczem do nauki i opanowania CSS.
jQuery to popularna biblioteka JavaScript, która znacznie ułatwia manipulację DOM (Document Object Model) i obsługę zdarzeń w przeglądarkach internetowych. Oto kilka kluczowych sposobów, w jakie jQuery upraszcza te zadania:
1. Uproszczona Manipulacja DOM:
Selektory: jQuery używa selektorów CSS do łatwego wybierania elementów DOM. Na przykład, $('#id') dla ID, $('.class') dla klas, i $('element') dla tagów.
Łańcuchowanie Metod: jQuery umożliwia łączenie wielu operacji na elementach w jeden łańcuch, co upraszcza kod. Na przykład, $('p').addClass('new-class').hide();.
Manipulacja Treścią: Metody takie jak .html(), .text(), i .val() ułatwiają pobieranie i ustawianie zawartości HTML, tekstu i wartości formularzy.
2. Obsługa Zdarzeń:
Prosta Rejestracja Zdarzeń: jQuery ułatwia dodawanie obsługi zdarzeń, takich jak kliknięcia czy zmiany, za pomocą metod takich jak .click(), .change(), itd.
Delegacja Zdarzeń: Za pomocą .on(), można dodać obsługę zdarzeń do elementów, które jeszcze nie istnieją w DOM (ale zostaną dodane w przyszłości), co jest przydatne w aplikacjach dynamicznych.
3. Efekty i Animacje:
jQuery oferuje wiele wbudowanych efektów i metod animacji, takich jak .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .animate(), co pozwala na łatwe dodawanie efektów wizualnych.
4. Zapytania AJAX:
Biblioteka upraszcza wykonywanie zapytań AJAX za pomocą metod takich jak $.ajax(), $.get(), $.post(), co pozwala na łatwe pobieranie danych z serwera bez przeładowywania całej strony.
5. Manipulacja Atrybutami i Stylami:
Metody takie jak .attr(), .css(), .addClass(), .removeClass(), .toggleClass() ułatwiają modyfikowanie atrybutów i stylów elementów.
Zalety jQuery:
Krótszy i Czytelniejszy Kod: Kod jest zwięzły i łatwy do zrozumienia.
Kompatybilność między Przeglądarkami: jQuery rozwiązuje wiele problemów związanych z różnicami między przeglądarkami.
Bogaty Zbiór Funkcjonalności: Oferuje szeroki zakres narzędzi do pracy z DOM, zdarzeniami, animacjami i AJAX.
Warto jednak zauważyć, że w nowoczesnym rozwoju stron internetowych, zwłaszcza z użyciem nowoczesnych frameworków JavaScript takich jak React, Angular czy Vue.js, bezpośrednia potrzeba stosowania jQuery maleje. Te frameworki często oferują własne, zintegrowane sposoby na manipulację DOM i obsługę zdarzeń.
Kod źródłowy dostępny na githubie
{{ review.user }}
{{ review.time }}
Proszę się zalogować, aby napisać opinię
Powiązane kursy
Specjalny
WEB DEVELOPER
W tym kursie będziemy budować jeden duży praktyczny projekt "Portal Randkowy". Będziemy go budować od początku do końca łącznie z opublikowaniem w ...
800PLN
WEB DEVELOPER
W kursie będziemy budować naszą pierwszą aplikację ASP.NET Core 2.1 MVC z Visual Studio 2017. Ten kurs ma na celu dać ci praktyczny sposób, aby dow...
200PLN
Zapisano się:
325 studentów
Czas trwania:
10 godzin
Wykłady:
49
Film:
10 godzin
Poziom:
Początkujący
