doctechnologie webowe dla początkujących
download 
Reklamacja Transkrypt
technologie webowe dla początkujących
TECHNOLOGIE WEBOWE DLA POCZĄTKUJĄCYCH ZAJĘCIA NR 2 Autor: Marcin Szczepański [email protected] Co dzisiaj w programie? • CZYM JEST HTML? • JAK BUDOWAĆ STRONY INTERNETOWE? • JAKIE SĄ PODSTAWOWE ELEMENTY JĘZYKA HTML? • CZYM JEST INSPEKTOR STRON? • JAK WSTAWIAĆ OBRAZKI, LINKI I TABELE NA STRONĘ? Czym jest HTML? • HTML5 to język opisowy wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest rozwinięciem języka HTML 4 i jego XML-owej odmiany (XHTML 1), opracowywane w ramach prac grupy roboczej WHATWG (Web Hypertext Application Technology Working Group) i W3C. Szkielet strony w języku HTML <!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8"/> <title>Tytuł strony</title> <meta name="description" content=„Opis strony"/> <meta name="keywords" content="słowa, kluczowe"/> </head> <body> Ciało strony </body> </html> Podstawowe elementy ciała strony internetowej • nowa linia: <br> lub <br /> • akapit: <p>treść</p> • nagłówki: <h1>Nagłówek 1</h1> (od 1 do 6) • <b>tekst pogrubiony</b> • <i>kursywa</i> • <u>podkreślenie</u> • krótki cytat: <q>krótki cytat</q> • odniesienie do źródła: <cite>odniesienie</cite> • blok cytowany: <blockquote>cytat</blockquote> Obrazki na stronie <img src="względna ścieżka" alt="Tekst alternatywny" /> Odsyłacze (linki) • odsyłacz do strony: <a href="ścieżka" >Opis odsyłacza</a> • odsyłacz pocztowy: <a href="mailto:ścieżka" >Opis ods.</a> • otwarcie odsyłacza w nowej karcie: target="blank" Tabele <table> <thead> <tr> <th>...</th> </th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </tbody> <tfoot> <tr> <td>...</td> <td>...</td> </tr> </tfoot> </table> Łączenie komórek tabeli • łączenie w pionie: <td rowspan="x">...</td> • łączenie w poziomie: <td colspan="x">...</td> Inspektor stron (F12) Zadanie domowe Utworzyć plik index.html, w którym należy: • • • • • • stworzyć ogólny szkielet strony; uzupełnić metadane; stworzyć nagłówek z tytułem strony; stworzyć link do swojej ulubionej strony tak, aby otwierał się w nowej karcie; wstawić obrazek ze strony internetowej i w razie błędu ładowania w miejscu obrazka ma pojawić się tekst Tu powinien być obrazek, ale się nie załadował; zbudować tabelę, w której będą informacje o uczestniku typu: imię, nazwisko, wiek, kierunek studiów, zainteresowania, itp. Wygląd przykładowego rozwiązania zadania domowego Dzięki, że wpadliście! Do zobaczenia za tydzień! Na kolejnych warsztatach rozpoczniemy pracę z CSS :)
