Hyper Text Markup Language



Podobne dokumenty
HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language)

Programowanie WEB PODSTAWY HTML

TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Wybrane znaczniki HTML

Podstawy (X)HTML i CSS

Język HTML i podstawy CSS

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Wprowadzenie do języka HTML

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >

HTML podstawowe polecenia

STRONY INTERNETOWE mgr inż. Adrian Zapała

Architektura WWW. HTML Część I - Podstawy. HTML język tworzenia stron WWW. Znaczniki HTML. Struktura dokumentu HTML. Kodowanie polskich liter

XHTML Budowa strony WWW

Systemy internetowe HTML

Programowanie w Internecie

Programowanie internetowe

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

WITRYNY I APLIKACJE INTERNETOWE

Elementarz HTML i CSS

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

Tworzenie stron internetowych w oparciu o język HTML

Witryna internetowa. Należy unikać w nazwach plików używania polskich znaków.

Informatyka i Ekonometria Informatyka ekonomiczna Ćwiczenia Usługi sieciowe. Tworzenie serwisów internetowych.

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Można też ściągnąć np. z:

Można też ściągnąć np. z:

Tworzenie Stron Internetowych. odcinek 5

Atrybuty znaczników HTML

Witryny i aplikacje internetowe

Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Odsyłacze. Style nagłówkowe

HTML informacje podstawowe

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Wykład 1: HTML (XHTML) Michał Drabik

HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego.

Konspekt do lekcji elementy informatyki dla klasy 4e Liceum Ogólnokształccego

Technologie Informacyjne

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Podstawy HTML. Tworzenie stron internetowych. Tomasz Piłka. Ucz się, jak gdybyś miał żyć wiecznie, żyj jak gdybyś miał umrzeć jutro

Edukacja na odległość

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

HTML ciąg dalszy. Listy, formularze

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.

Strony WWW - podstawy języka HTML

przygotował: mgr Szymon Szewczyk PODSTAWY

HTML/XHTML. dr Beata Kuźmińska-Sołśnia

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ

Języki programowania wysokiego poziomu. HTML cz.2.

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Podstawowe znaczniki języka HTML.

Specyfikacja mailingu GG Network

Witryny i aplikacje internetowe. mgr inż. Remigiusz Pokrzywiński

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista

Tworzenie stron internetowych w kodzie HTML Cz 5

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.

Znaczniki języka HTML

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Aplikacje internetowe

HTML cd. Ramki, tabelki

Rys historyczny. HTML Część I - Wprowadzenie. Składniki architektury WWW. Zadania klienta HTTP (przeglądarki WWW - Web Browser)

Specyfikacja techniczna dot. mailingów HTML

Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW

HTML jak zrobić prostą stronę www

Formularze Pobierają dane od użytkownika strony i wysyłają je do przetworzenia na serwerze (gdzie potrzebne są skrypty,któredaneprzetworzą najczęściej

Budowa dokumentu HTML 5

Laboratorium 1: Szablon strony w HTML5

Kurs HTML 4.01 TI 312[01]

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)

O stronach www, html itp..

Uwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET.

Podstawy. w HTML u HTML??? tworzenia stron internetowych. dla wszystkich. nie wiem co to jest, ale na pewno nie jest trudne.

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH. PODSTAWY JĘZYKA HTML (HyperText Markup Language)

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

Sierpień 2015 rozwiązanie plik: index.htlm

[ HTML ] Tabele. 1. Tabela, wiersze i kolumny

Innowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY

Podstawy tworzenia stron internetowych

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

za pomocą: definiujemy:

2. Projektowanie stron WWW podstawowe informacje

Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II

Języki programowania wysokiego poziomu. HTML cz.1.

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Transkrypt:

Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na zorganizowanie dokumentów interaktywnych. Obsługuje formularze do przesyłania danych na serwer protokołem CGI (Common Gateway Interface).

Podstawy projektowania dokumentów WWW Język znaczników HTML Funkcje języka HTML: formatowanie tekstu; organizowanie dokumentu w strukturę; interaktywność; przesyłanie danych protokołem CGI; dołączanie grafiki, dźwięków i animacji; przechowywanie dokumentu w formacie ASCII (pliki tekstowe).

Znaczniki (TAGS) Słowa kluczowe pisane pomiędzy znakami < i > (nawiasami trójkątnymi). Nadają one cechy funkcjonalne i atrybuty graficzne danym tworzącym dokument. Składnia znacznika HTML <H1 align= center > Witam serdecznie </H1> Znacznik otwierający Słowo kluczowe Atrybut Wartość atrybutu Objęty tekst Znacznik zamykający

ZagnieŜdŜanie znaczników <H1>Aktualne <I>wyniki</I></H1> <H1> <I> </I> </H1> <H1> <I> </H1> </I> dobrze źle

Struktura dokumentu HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Prolog - identyfikator uŝywanego języka <HTML> </HTML> <HEAD>... </HEAD> <BODY>... </BODY> Identyfikator dokumentu HTML Sekcja zawierająca informacje nie stanowiące treści dokumentu. Sekcja zawierająca właściwą treść dokumentu.

Sekcja HEAD Stosowane znaczniki: <TITLE> <TITLE>Tytuł strony</title> <BASE> <BASE href= http://www.serwer.pl/index.html > <LINK> <LINK REL=stylesheet HREF="nazwa_pliku.css" TYPE="text/css"> <SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="nazwa_pliku.js">... </SCRIPT> <SCRIPT LANGUAGE="JavaScript">... </SCRIPT> <META> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2"> <META HTTP-EQUIV="Refresh" CONTENT="sekundy; URL=http://adres strony"> <META NAME="Description" CONTENT="streszczenie zawartości strony"> <META NAME="Keywords" CONTENT="słowa kluczowe"> <META NAME="Language" CONTENT="pl"> <META NAME="Author" CONTENT="imię i nazwisko autora"> <META NAME="Generator" CONTENT="nazwa uzytego edytora"> Do notatnika webmastera: <META NAME="DISTRIBUTION" CONTENT="GLOBAL"> <META NAME="RATING" CONTENT="GENERAL"> <META NAME="REVISIT-AFTER" CONTENT="30 DAYS"> <META NAME="ROBOTS" CONTENT="ALL">

Sekcja BODY - treść dokumentu Atrybuty znacznika <BODY>: background, bgcolor, text, link, vlink (visited link), alink (active link), leftmargin, topmargin. Tablica predefiniowanych wartości kolorów: yellow, red, green, itd... Kodowanie kolorów składowymi RGB: #{czerowny od 00 do FF}{zielony od 00 do FF}{niebieski od 00 do FF} #{R}{G}{B} y kolorów: #FF0000 - czerwony (red), #0000FF - niebieski (blue), #A52A2A - brązowy (brown).

Formatowanie tekstu Znaczniki formatujące: <h1>... </h6> <em>, <strong>, <b>, <i>, <u>, <strike> <big>, <small>, <tt> <blink> <sup>, <sub> <font>, <basefont> <blockquote> <pre> <p>, <div>, <span> <center> <br> Atrybuty: align = left center right top bottom middle, size face color title clear = left right all style

Obrazki <IMG src= nazwa_pliku > Atrybuty: src alt align = top left center middle right bottom top, width, height hspace, vspace border y: <IMG src= " zaba.jpg" width=140 height=100 alt= Zabka"> <IMG src="../button/wstep.gif" width=110 height=30 border=0 hspace=4 alt= Strona główna">

Odnośniki i zakładki <A href= adres_url >Nazwa strony</a> <A name= zakładka ></A> <A href= #zakładka >Nazwa sekcji</a> <A href= adres_url#zakładka >Nazwa strony i sekcji</a> Atrybuty: href target title name Adres URL (Uniform Resource Locator) Wskaźnik do zasobów zawierający informację, gdzie znajduje się plik i co powinna z nim zrobić przeglądarka. <A href= http://www.eti.pg.gda.pl/biuletyn/index.html >Biuletyn ETI</A> Protokół Nazwa serwera ŚcieŜka dostępu Nazwa pliku

Listy uporządkowane <OL> <LI>pierwszy element</li> <LI>drugi element</li>... <LI>ostatni element</li> </OL> Atrybuty: type= A a I i 1 start value Listy nieuporządkowane <UL> <LI>pierwszy element</li> <LI>drugi element</li>... <LI>ostatni element</li> </UL> Listy definicji <DL> <DT>Pierwsze pojęcie</dt> <DD>Pierwsza definicja</dd> <DT>Drugie pojęcie</dt> <DD>Druga definicja</dd>... <DT>Ostatnie pojęcie</dt> <DD>Ostatnia definicja</dd> </DL> Atrybuty: type= disc round square

Tabele <TABLE> <TR> <TD>Element 1x1</TD> <TD>Element 1x2</TD> </TR> <TR> <TD>Element 2x1</TD> <TD>Element 2x2</TD> </TR> </TABLE> Element 1x1Element 1x2 Element 2x1Element 2x2 łączenie komórek rowspan i colspan A + B C D E + F G H <TR>...</TR> - wiersz tabeli <TH>...</TH> - nagłówek komórki <TD>...</TD> - komórka danych <CAPTION>...</CAPTION> - pole nagłówka tabeli Atrybuty: border align, valign cellspacing, cellpadding width, height colspan, rowsapn nowrap

Formularze <FORM method= POST action= nazwa_skryptu_cgi > <INPUT type= text name= Tytuł > <TEXTAREA name= Treść ></TEXTAREA> <SELECT name= Kto > <OPTION value= pracownik > pracownik <OPTION value= klient > klient </SELECT> <BUTTON type= submit >Wyslij</BUTTON> <INPUT TYPE="button" VALUE="napis"> </FORM> Typy kontrolek INPUT : text password radio checkbox submit reset hidden image Atrybuty: name type value size, maxlength checked rows, cols selected src

Rozszerzenie języka HTML DHTML - dynamiczny HTML, połączenie JavaScript i CSS co pozwala na tworzenie stron dynamicznych np.: interakcyjne menu; WML - internet dla telefonów komórkowych; JavaScript - język skryptów wew. strony, wykonywany po stronie uŝytkownika; CSS - Kaskadowe Arkusze Stylów (cascading style sheet), pozwala określić rodzaj czcionki czy kolor tła dla wielu dokumentów jednocześnie; CGI, PHP, SSI, ASP, JSP, MySQL - skrypty wykonywane po stronie serwera, uŝytkownik otrzymuje gotowy kod HTML bez skryptów wewnątrz dokumentu. SłuŜą m.in. do tworzenia formularzy, łączenia dokumentów po stronie serwera, tworzenia baz danych (MySQL).