Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www

Szkolenie HTML i CSS w praktyce – moduł I: tworzenie stron www

Warsztat z certyfikatem Akademii IT Media

Stacjonarnie Warszawa lub online | na żywo

Jako jedyny w Polsce Elitarny Edukacyjny Partner Adobe mamy zaszczyt zaprosić Cię na Szkolenie HTML i CSS – moduł I z certyfikatem! Szkolenie prowadzone jest w formie zajęć stacjonarnych w Warszawie lub zdalnej pracy z domu w dowolnej lokalizacji. Ma charakter praktycznych ćwiczeń warsztatowych z trenerem.

To idealna propozycja dla tych, którzy chcą rozpocząć swoją przygodę z tworzeniem stron WWW. Szkolenie to jest pierwszą częścią Kursu tematycznego HTML i CSS oraz pierwszą częścią Kursu Web Designer.

W ciągu kilkudniowego szkolenia pokażemy Ci, że HTML i CSS to nie czarna magia, jak początkowo mogłoby się wydawać.

Jak wygląda szkolenie?

Program szczegółowy

Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www

I dzień – Rozpoczęcie szkolenia – 8:30

Domena internetowa

• Rodzaje domen
• Gdzie można kupić domenę i na co zwrócić uwagę
• Najważniejsze zagadania jakie obowiązkowo trzeba znać zanim zarejestrujesz nazwę domeny

Hosting www

• Przegląd usług oferowanych w internecie
• Co to jest ftp, Certyfikat SSL, kopia bezpieczeństwa itp.

Wprowadzenie do stron www

• Możliwości i ograniczenia internetu
• Wstępne omówienie wybranych struktur stosowanych w projektach www
• WCAG jest bardzo ważne
• Pamiętaj o SEO serwisu – wprowadzenie
• Znajomość HTML – fundament stron www

Co powinniśmy wiedzieć? Na początek o nowoczesnym projektowaniu stron www

• Mobile first – co to jest?
• Responsive Web Design
• Kim jest potencjalny użytkownik strony www
• Określenie celów jakie ma spełniać serwis www
• Wstęp do UX stron www
• Statystyki nie kłamią – przegląd danych o użytkownikach
• Narzędzia deweloperskie w przeglądarkach internetowych

Przerwa obiadowa – 13:30 – 14.00

Wybór edytora kodu

• Przegląd wybranych narzędzi wykorzystywanych w procesie tworzenia serwisów internetowych
• Konfiguracja środowiska programu Visual Studio Code
• Dodatkowe rozszerzenia ułatwiające pisanie kodu

Zasady projektowania i tworzenia serwisów internetowych

• Rozpoznanie potrzeb Klienta
• Wybór odpowiedniej technologii
• Przygotowanie struktury serwisu
• Omówienie układu i struktury strony internetowej

Zakończenie szkolenia – 16:30

II dzień – Rozpoczęcie szkolenia – 8:30

Standardy budowy stron WWW

• dokument HTML
• Standard HTML5
• CSS
• JavaScript i popularne biblioteki
• Inne technologie

Podstawowe elementy strony WWW

• Tekst
• Grafika
• Style CSS
• Kolor
• Popularne biblioteki JavaScript
• PDF
• Multimedia

Przerwa obiadowa – 13:30 – 14.00

Przygotowanie i budowa optymalnej struktury serwisu WWW

Zasady tworzenie układu strony WWW

• Zasady tworzenie stron w oparciu o znacznik i style CSS
• Zasady użycia semantycznych znaczników HTML5
• Zalety budowy strony w oparciu o znaczniki HTML5 i style kaskadowe

Przegląd layoutów stron WWW

• Przegląd i porównanie wybranych układów stron internetowych
• Zasady budowy layoutu

Zakończenie szkolenia – 16:30

III dzień – Rozpoczęcie szkolenia – 8:30

Arkusze stylów

• Łączenie arkusza ze stroną HTML
• Jak używać stylów CSS?
• Wprowadzenie i przegląd podstawowych właściwości CSS

Tworzenie strony WWW

• Podstawowe informacje o znacznikach HTML5
• Tworzenie strony internetowej w oparciu o znaczniki semantyczne HTML5
• Analiza struktury strony (headrer, footer, section, content, nav i inne elementy)
• Wprowadzenie do: Flexbox i Grid

Wykorzystanie semantycznych znaczników HTML5 do tworzenia struktury strony www

• Formatowanie elementów tekstowych
• Rozmiary i stosowane jednostki w CSS
• Nagłówki
• Hiperłącza
• Wykorzystanie list numerowanych i nienumerowanych
• Zdjęcia
• Przygotowanie i stylizowanie pól formularzy (rodzaje stosowanych pól)
• Grafika na stronie www

Zasady użycia stylów CSS

• Zasady tworzenie stylów CSS
• Rodzaje selektorów
• Style typu class, tag, id, selektory złożone, pseudoelementy
• Dziedziczenie właściwości

Hierarchia stylów

• Podstawowe właściwości stylów
• Kształty CSS

Przerwa obiadowa – 13:30 – 14.00

Wprowadzanie treści strony

• Wprowadzanie tekstów
• Wykorzystanie grafiki
• Logiczna struktura strony WWW
• Wykorzystanie listy, akapitów i znaczników nagłówkowych
• Dodawanie elementów nawigacyjnych
• Formatowanie strony i edycja układu strony w oparciu o style CSS

Wykorzystanie różnorodnych selektorów CSS

• Użycie zaawansowanych właściwości CSS do formatowania elementów strony i jej układu
• Tworzenie atrakcyjnej nawigacji
• Wykorzystanie listy do tworzenia nawigacji
• Wykorzystanie stylów CSS do edycji wyglądu menu

Dodawanie łączy

• Efekty specjalne nawigacji (wykorzystanie pseudoklas :hover, :active, :selected)

Zakończenie szkolenia – 16:30

IV dzień – Rozpoczęcie szkolenia – 8:30

Wprowadzenie do optymalizacji strony pod kątem wyszukiwarek internetowych

• Logiczna struktura strony
• Znaczniki w sekcji head
• Zasady tworzenia tytułu i użycia nagłówków
• Teksty alternatywne, nazwy łączy, itp
• Logika strony i stosowanie znaczników HTML

Praca z grafiką

• Zarządzanie wielkością
• optymalizacja grafiki
• Teksty alternatywne
• Dodawanie łączy
• Formatowanie grafiki za pomocą stylów CSS
• Filtry CSS

Przerwa obiadowa – 13:30 – 14.00

Zasady formatowania tekstów na stronie WWW

• Wykorzystanie typografii i stylów CSS
• Formatowanie tekstów za pomocą stylów CSS

Arkusze stylów CSS głębsze spojrzenie

• Formatowanie grafik, list, nagłówków i itp.
• Ostateczne dostosowanie wyglądu strony przy użyciu stylów CSS
• Dostosowanie stylów do poprawnego wyświetlania strony w różnych przeglądarkach

Ciekawe efekty wizualne z użyciem stylów CSS

• Dodawanie tła strony
• Interaktywne elementy nawigacji
• Wykorzystanie CSS3

Wykorzystanie i formatowanie tabel

• Struktura tabeli
• Stylowanie wizualne

Zakończenie szkolenia – 16:30

V dzień – Rozpoczęcie szkolenia – 8:30

Tworzenie galerii zdjęć

• Biblioteka Lightbox
• Przygotowanie grafiki
• Struktura galerii
• Edycja i formatowanie galerii
• Edycja kodu JavaScript

Google Maps

• Rodzaje map
• Osadzenie podstawowej mapy Google na stronie

Wykorzystanie filmów wideo i muzyki na stronie WWW

Testowanie i walidacja strony WWW

• Testowanie poprawności działania strony w różnych przeglądarkach
• Testowanie poprawności kodu HTML i stylów CSS
• Konfiguracja serwera WWW

Strona www online

• Serwer ftp
• Konfiguracja programu klienta ftp
• Publikacja strony online – przesyłanie strony na serwer
• Aktualizowanie strony www na serwerze produkcyjnym

Przerwa obiadowa – 13:30 – 14.00

Tips & Triks

Pamiętaj o SEO

• Wstęp do pozycjonowania
• Optymalizacja plików strony www
• Kompresja grafik
• Wytyczne SEO dla serwisów www

Co dalej

• Serwisy www wykorzysujące CMS
• Dlaczego warto zainteresować się systemem WordPress
• Czy SEO jest dla Ciebie?

Podsumowanie

Zakończenie szkolenia – 16:30

Każdego dnia oprócz przerwy obiadowej, przewidziane są dwie przerwy kawowe po 15 minut.

Jak zdobyć dofinansowanie na Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www?

Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www - opinie na temat szkolenia

Zarówno oferowane Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www, jak i pozostałe szkolenia organizowane przez IT Media cieszą się dużym uznaniem wśród uczestników, którzy najwyższej oceniają naszych wykładowców. Goście zajęć doceniają ich przygotowanie, zaangażowanie i podejście. Przychodząc na nie, przekonasz się, że stawiamy na wykwalifikowaną kadrę, która z pasją podchodzi do prowadzenia wykładów. Nasze kursy i usługi mają średnią ocen 4,9 w Google oraz 5,0 na Facebooku.

Sprawdź nasze opinie na Google >

Dowiedz się więcej o szkoleniu

Szkolenie HTML i CSS w praktyce – moduł I: tworzenie stron www pozwoli Ci odkryć podstawy projektowania i tworzenia estetycznych oraz funkcjonalnych stron WWW. W przystępny sposób, zapoznając się krok po kroku z wiedzą niezbędną do tworzenia stron, zdobędziesz umiejętności poparte pełnym zrozumieniem tematyki oraz praktyką.

W trakcie 5-dniowych, zintegrowanych zajęć korzystamy oczywiście z możliwości jakie oferuje nam język HTML i CSS. Podczas zajęć wykorzystujemy również produkty firmy Adobe: Photoshop (przygotowanie projektu strony i jej elementów graficznych) oraz Dreamweaver (najlepszy na rynku edytor HTML i CSS), a także bibliotekę JavaScript itp.

Podczas zajęć wykorzystujemy również programy podobne w działaniu do Adobe Dreamweaver, po to aby w bardziej przybliżyć Ci realia pracy przy kodowaniu serwisów www. W ten sposób zajmujemy się tworzeniem stron internetowych, które są atrakcyjne wizualnie i zgodne ze standardami. Naturalnie korzystamy także z fizycznego serwera WWW, gdzie uczestnicy zajęć mogą samodzielnie zamieszczać, aktualizować i testować efekty swojej pracy. Podczas szkolenia pokazujemy proces wyboru i zakupu optymalnej nazwy domeny oraz konfiguracji niezbędnych usług na serwerze.

Ponadto, w trakcie szkolenia otrzymasz też wiedzę z zakresu optymalizacji i pozycjonowania stron internetowych. Podczas tworzenia projektu wykorzystujemy nabytą wiedzę, tak aby finalny produkt spełniał oczekiwania klientów i był w pełni satysfakcjonujący dla Ciebie jako jego twórcy.

Wprowadzenie do HTML

Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www rozpoczyna się od krótkiego wyjaśnienia dotyczącego standardów HTML i tego jak one ewoluowały. Warto jest zrozumieć różnice między HTML i XHTML i spojrzeć na współczesne normy z szerszej perspektywy. Następnie, przystępujemy do nauki i analizy kodu HTML. Szczególną uwagę przywiązujemy tutaj do sekcji <head> pod kątem dostępności i optymalizacji pod wyszukiwarki. Omawiamy tagi takie jak <title>, <meta>, <link> oraz <style>. Niektórzy z dotychczasowych uczestników naszego szkolenia zauważyli znaczą poprawę pozycji ich własnych stron w rankingu Google. I to jedynie po wprowadzeniu zalecanych zmian omówionych w tej części szkolenia.

Tworzenie struktury strony z HTML

W dalszej kolejności zajmujemy się analizą struktury HTML i znaczników treści, które są używane w typowych elementach stron WWW. Przyglądamy się temu jak stosowane są nagłówki w celu stworzenia semantycznej struktury i wypracowania sensownego układu strony. Szczególny nacisk kładziony jest na najczęściej używane znaczniki treści. Uczymy się tworzyć linki, listy, tabelki oraz osadzać je w typowym projekcie strony. Następnie zapoznajemy się ze znacznikami formatowania HTML mając na uwadze semantykę i stylowanie.

Uczestnicy szkolenia zapoznają się również z często popełnianymi błędami i problemami związanymi z użyciem HTML. Co więcej, poznają skuteczne sposoby radzenia sobie z nimi. Zwrócona zostanie ich uwaga na możliwe trudności wiążące się z instalacją i stosowaniem różnych wtyczek i narzędzi developerskich.

Wprowadzenie do CSS

Znaczna część szkolenia poświęcona jest na zapoznanie się ze stylami CSS. Na początek, uczestnicy szkolenia dowiedzą się jakie są sposoby umieszczania stylów CSS w dokumencie i każdy z nich zostanie przećwiczony. Następnie przeanalizujemy składnię CSS i zwrócimy uwagę na najczęściej popełniane błędy zapisu reguł. Poznamy selektory takie jak klasa, identyfikator oraz ich atrybuty.

Szkolenie jest wprowadzeniem do typografii CSS i omówieniem najczęściej używanych właściwości służących do stylowania tekstu. W tym także zmiany odstępów między elementami, fontów czy też dekoracji znaków. Wszystkie nabyte umiejętności będą niezbędne do elementów projektowanej strony www.

Praca nad wyglądem strony z CSS

Każdy Web designer i Web developer powinien wiedzieć na czym polega model pudełkowy w CSS i tego też nauczymy się w tej części szkolenia HTML i CSS. Wyjaśnimy jak wpływa on na odstępy i rozmieszczenie poszczególnych elementów na stronie. Nauczymy się kontrolować rozmiar treści i stosować obrazki tła dla kontenerów i strony WWW. Podobnie jak w przypadku HTML, uczestnicy szkolenia poznają możliwe trudności wiążące się z używaniem CSS i narzędzi developerskich przeglądarek.

Przygotowanie i optymalizacja grafiki na potrzeby strony internetowej

Istnieje takie przysłowie, które mówi, że jeden obraz jest wart więcej niż tysiąc słów. Samo stwierdzenie jest już bardzo stare, ale jego przesłanie niezwykle aktualne także w świecie wirtualnym. Dla przykładu, klient e-commerce nie ma możliwości dotknięcia produktu, zapoznania się z jego fakturą, obejrzenia z każdej strony. Dlatego też w znacznej mierze polega na obrazach z jakimi ma styczność na stronie internetowej. Jeśli prowadzisz bloga lub projektujesz stronę internetową, również będzie Ci zależeć, aby zdjęcia wyglądały profesjonalnie i przyciągały oko użytkowników. Zdjęcia w wysokiej rozdzielczości, ostre, pełne kolorów potrafią dużo ważyć. Spróbuj zamieścić kilka takich na stronie internetowej. Nieliczni odwiedzający będą mieli na tyle wytrwałości, aby pozostać na stronie Waszego sklepu i sfinalizować zakup produktu. Ciężkie zdjęcia znacząco wydłużają czas ładowania się strony www. Warto zwrócić uwagę na ten element przy projektowaniu stron pod urządzenia mobilne. To jest bardzo ważne w kontekście optymalizacji serwisu www pod kątem jego wydajności.

Podczas szkolenia trener pokaże Wam jak odnaleźć równowagę między jakością zdjęć a ich rozmiarem, kiedy grafika używana jest na stronie WWW, tak aby zdjęcia prezentowały się dobrze, szybko ładowały i nie sprawiały wyszukiwarce problemów z indeksowaniem. Zaprezentowane zostaną narzędzia graficzne służące do edycji. Uczestnicy szkolenia HTML i CSS poznają dostępne opcje zapisu grafik dla Internetu: GIF, JPG i PNG wraz z ich mocnymi stronami i słabościami. Jako uczestnik szkolenia dowiesz się jak zmieniać rozmiary, kompresować zdjęcia i jaki nadać im tytuł oraz tekst alternatywny, tak aby korzystnie wpłynąć na SEO i zwiększyć szanse na pojawienie się Twojej grafiki w Google Grafika, a samego artykułu w wynikach wyszukiwania. W celu zwiększenia zakresu wiedzy w tym temacie zapoznaj się również z naszą ofertą dotyczącą kursu Adobe Photoshop.

Galerie, mapy, wideo i audio na stronie WWW

Zamieszczanie video na stronie jest stosunkowo częstą praktyką, czy to w przypadku blogów czy gigantów działających na rynkach międzynarodowych. Dlatego też tworząc stronę prędzej czy później zetkniesz się z tą tematyką. Dowiesz się jakie istnieją możliwości w tym zakresie i które sposoby są warte uwagi. Poznasz nowe elementy HTML5 dedykowane właśnie do obsługi odtwarzaczy wideo i audio.

Poprawna optymalizacja stron WWW

Nie jest tajemnicą, że Google bardzo ceni strony doskonałe pod względem technicznym. Jeśli zależy Ci na tym, aby Twoja strona uzyskała wysoką pozycję w wynikach wyszukiwania istotne jest, abyś już na starcie zdobył rzetelne podstawy i podczas dalszego doskonalenia nie odpuszczał w żadnym momencie i na żadnym etapie pracy i nauki własnej. Podczas tego szkolenia, nasz trener nauczy Cię tworzenia stron z dbałością o szczegóły. Już od samego początku pokaże Ci jak zadbać o poprawną optymalizację kodu strony. Nauczysz się tworzyć strony, które będą się szybko ładowały. Co więcej, dowiesz się, jak zaopatrzyć stronę w poprawnie sformułowane nagłówki i metatagi. Elementy te są zgodne z najnowszymi standardami tworzenia stron internetowych i wpływają na sprawniejsze odnalezienie strony przez wyszukiwarki.

Niech przemówią za nas liczby