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

cena 2500 zł (netto)

40h (5 dni)

Ścieżka: Tworzenie stron www i aplikacji

Najbliższy termin:


10-14 lutego 2020

Sprawdź inne terminy zapisz się

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

średnia ocen: 5.0

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

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ć.

szkolenie html i css wprowadzenie dla początkujących

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.

szkolenie html i css początki

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.

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

Podczas szkolenia poznasz szereg narzędzi i wykształcisz umiejętności, które pozwolą Ci zaistnieć w branży i samodzielnie tworzyć dobre strony WWW. Dodatkowo dowiesz się, w jaki sposób zadbać o ich pozycjonowanie w wyszukiwarkach.

Zapisz się na szkolenie HTML i CSS w praktyce – moduł I już dziś!

Czego się nauczysz

  • Projektowania i tworzenia grafiki internetowej i jej optymalizacji
  • Wykorzystania narzędzi graficznych do edycji i dopasowania zdjęć
  • Użycia filtrów i efektów dla zdjęć oraz elementów graficznych
  • Dopasowania kolorów i jasności zdjęć
  • Sterowania wielkością zdjęć i elementów graficznych
  • Cięcia projektu na elementy konieczne do budowy strony HTML
  • Tworzenia atrakcyjnych nagłówków oraz reklam graficznych
  • Wykorzystanie programu Adobe Dreamweaver do edycji kodu HTML5 i stylów kaskadowych
  • Wykorzystanie innych edytorów kodu dostępnych na rynku
  • Tworzenia szablonów stron www
  • Zasad tworzenia nowoczesnych stron www
  • Znaczników i struktury kodu HTML5
  • Dodawania łączy i ich formatowania
  • Tworzenia różnorodnych struktur nawigacyjnych (menu)
  • Formatowania menu głównego oraz innych elementów nawigacyjnych
  • Użycia grafik na stronie www
  • Zasad języka HTML oraz nowości HTML5
  • Budowy stron WWW z użyciem HTML5 oraz arkuszy stylów CSS
  • Zarządzania wyglądem strony i jej elementów przy użyciu stylów CSS
  • Tworzenie i edycji różnorodnych stylów CSS
  • Wykorzystania różnych selektorów CSS
  • Wykorzystania języka JavaScript i różnorodnych widgetów
  • Wykorzystania interaktywnych elementów typu: Accordion, Tabbed Panel czy Collapsible Panel
  • Użycia zewnętrznych bibliotek JavaScript
  • Tworzenia, testowania i wdrażania atrakcyjnych formularzy w oparciu o style CSS
  • Walidacji danych formularza i przesyłania ich w wiadomości e-mail
  • Tworzenia nowoczesnych galerii zdjęć z użyciem biblioteki Lightbox lub podobnych
  • Użycia filmów wideo i muzyki na stronie internetowej
  • Przesyłania strony WWW na serwer produkcyjny
  • Optymalizacji grafiki i kodu pod wymagania Google
  • Aktualizacji strony na serwerze produkcyjnym
  • Dodawania efektów specjalnych i trików
  • Tworzenia strony www od podstaw i… podszewki

Dla kogo jest to szkolenie?

Szkolenie HTML i CSS w praktyce – moduł I: solidne podstawy przeznaczone jest przede wszystkim dla osób, które rozpoczynają swoją przygodę z HTML i CSS oraz chcą zacząć tworzyć strony www w oparciu o praktyczną wiedzę przekazywaną w przystępny sposób.

Czego oczekujemy?

Znajomość obsługi komputera oraz platformy PC lub MacOS.

Program szczegółowy

Możliwości i ograniczenia Internetu

Zasady projektowania i tworzenia serwisów internetowych

  • rozpoznanie potrzeb Klienta
  • wybór odpowiedniej technologii
  • przygotowanie struktury serwisu
  • omówienie układu strony internetowej
  • struktura strony internetowej

Standardy budowy stron WWW

  • typy dokumentów HTML
  • HTML5
  • CSS
  • JavaScript i popularne biblioteki
  • jQuery,
  • inne technologie

Podstawowe elementy strony WWW

  • tekst
  • grafika
  • style CSS
  • biblioteki JavaScript
  • PDF
  • wideo i muzyka

Przygotowanie struktury serwisu WWW

  • site – definicja i zasady tworzenia i edycji
  • budowa optymalnej struktury katalogów
  • przygotowanie katalogu site’a

Tworzenie site’a

  • konfiguracja site’a w programie Dreamweaver

Porównanie różnych metod budowy layoutu strony 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 strony internetowej
  • układ jednokolumnowy
  • układ dwukolumnowy
  • układy wielokolumnowe
  • grid i wstęp do Responsive Web Design

Zasady budowy layoutu w Adobe Dreamweaver

  • Wykorzystanie semantycznych znaczników HTML5 do tworzenia struktury strony www
  • formatowanie elementów tekstowych
  • wykorzystanie listy
  • grafika na stronie www

Zasady użycia stylów CSS

  • zasady tworzenie stylów CSS
  • rodzaje selektorów
  • style typu class, tag, id, compound
  • dziedziczenie właściwości
  • podstawowe właściwości stylów
  • narzędzia tworzenia i edycji stylów w programie Adobe Dreamweaver
  • arkusze stylów
  • łączenie arkusza ze stroną HTML
  • CSS3

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)

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
  • zasady dziedziczenia
  • hierarchia stylów
  • 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)

Optymalizacja 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 znaczników

Praca z grafiką

  • zarządzanie wielkością, optymalizacja grafiki
  • kadrowanie i efekty graficzne w programie Dreamweaver
  • wykorzystanie elementów typu Smart Object i współpraca z plikami Photoshopa
  • teksty alternatywne
  • dodawanie łączy
  • formatowanie grafiki za pomocą stylów CSS

Zaawansowane formatowanie tekstów

  • 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 grafiki, list, nagłówków
  • 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

Tworzenie animacji na bazie stylów CSS

  • animacje na stronie www
  • animacje za pomocą stylów CSS

Budowa szablonów stron WWW

  • tworzenie szablonów stron internetowych w programie Dreamweaver
  • rodzaje szablonów
  • wykorzystanie szablonów do tworzenie kolejnych podstroi serwisu
  • edycja szablonu i aktualizowanie podstron

Tworzenie stron WWW na podstawie szablonów Dreamweavera

  • wykorzystanie i formatowanie tabel
  • zapis i testowanie stron
  • dodawanie łączy
  • tworzenie i edycja stylów CSS dla elementów nawigacyjnych
  • zaawansowane sposoby użycia stylów do formatowania menu

Praca z formularzem WWW

  • zasady budowy formularza
  • tworzenie interaktywnego formularza kontaktowego
  • formatowanie elementów formularza za pomocą stylów CSS
  • walidacja i testowanie działania formularza na stronie WWW
  • edycja stylów CSS formularza

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

  • konfiguracja site’a
  • wybór firmy hostingowej i zakup domeny
  • serwer ftp
  • konfiguracja Adobe Dreamweaver do pracy z serwerem

Przesyłanie i aktualizacja strony na serwer WWW

  • połączenie z fizycznym serwerem WWW
  • przesyłanie strony na serwer
  • pobieranie stron z serwera
  • aktualizacja strony na serwerze WWW
  • synchronizacja

Tworzenie interaktywnej galerii typu Lightbox

  • Instalacja biblioteki Lightbox
  • przygotowanie grafiki
  • struktura galerii
  • edycja i formatowanie galerii
  • edycja kodu JavaScript
  • publikacja galerii

Osadzenie mapy Google na stronie

  • wykorzystanie Google Map API do osadzenia mapy

Dodatkowe biblioteki JavaScript np. JQuery

  • instalacja i wykorzystanie gadżetów JQuery
  • tworzenie galerii zdjęć przy użyciu biblioteki Lightbox

Wykorzystanie filmów wideo i muzyki na stronie WWW

  • problemy z przeglądarkami i wojna formatów
  • wykorzystanie i osadzanie filmów z YouTube
  • wykorzystanie plików mp4, mp3, ogg
  • tworzenie odtwarzacza wideo na stronie WWW
  • tworzenie odtwarzacza audio na stronie www

Tips & Triks, biblioteki Javascript oraz dodatki do programu

Wstęp do pozycjonowania i optymalizacji SEO

Nasi trenerzy

Marcin Bober

Marcin Bober. Prowadzi szkolenia z zakresu budowania i optymalizacji serwisów www i aplikacji mobilnych. W pracy dydaktycznej duży nacisk kładzie na przygotowanie słuchaczy do samodzielnej pracy i tworzenia własnych kreatywnych rozwiązań.

dowiedz się więcej
o tym wykładowcy

Standard szkolenia

Jedyny w Polsce
Autoryzowany Ośrodek Szkoleniowy
Adobe i Maxon

Certyfikowani wykładowcy - praktycy

Najnowsze oprogramowanie i samodzielne stanowisko komputerowe PC/MAC

Certyfikat i materiały szkoleniowe

Małe, kameralne grupy szkoleniowe

Pyszny obiad i kawa

Opinie z ankiet po szkoleniu

Super przekazywana wiedza w luźny, ale konkretny sposób. Dużo pomocy od prowadzącego.

- Bartłomiej B.

Profesjonalne podejście, dużo wiedzy przekazanej przez prowadzącego.

- Aleksander C.

Wszystko super, jestem szczęśliwa, dzięki.

-

Czcesz zapytać o coś przed zakupem?
Napisz do nas na szkolenia@itmedia.pl

lub zadzwoń pod numer

22 678 38 87