Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych Podstawy. HTML i XHTML Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Projektowanie warstwy klienckiej aplikacji internetowych Podstawy. HTML i XHTML Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Politechnika Łódzka, ul. Żeromskiego 116, Łódź, tel. (042)
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Client-server Client-server is network architecture which separates the client (often an application that uses a graphical user interface) from the server. Each instance of the client software can send requests to a server or application server. There are many different types of servers; some examples include: a file server, terminal server, or mail server. While their purpose varies somewhat, the basic architecture remains the same.. Web browser Web server request response
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. URL protocol name – server domain address 80 – port number index.jsp – name of a resource #id – identiffier of part of the resource Few parts in the name has defaults, so browser (default protocol and port number) and server (default resource name, aliases for server name) can simplify it.
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Copyrights According to the polish law, you cannot copy anything from Internet, even if it is written on web page that you can You cannot put any hyperlinks pointing other sites But ussually: if you copy text or pictures from the page, that allows for it if you put a link pointing to the main page of other web service it shouldn't be any troubles.
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Golden rules avoid spelling mistakes create pages using utf-8 character encoding do not use any web page generators size does matter. Each page should be smaller that 70 (???) kb put information about sizes of downloaded files put on your page last modification date
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. HTML i XHTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 1.1 XHTML 2.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " some part of document OR :
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. HTML i XHTML(2) HTML: XHTML: or: XML style: Each tag has to be completely nested Each attribute should be doublequoted Other differences: Many tags attributes moved to the CSS All tags should be written using small letters Global attributes: style, type, id, class
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. DTD a) Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " b) Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " c) Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Header elements Page title
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Text formatting (HTML4.01) bold italic underline monotype superscript subscript strike red, font size 5, font family: Arial bold,underline, italic bold and underline only bold nothing
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Text formatting (XHTML) All tags and attributes related to fonts has been moved to CSS Headers: from: up to The biggest The smallest Tooltip over headers: Some title... Paragraph: It is new paragraph New line tag: Horizontal line:
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Text formatting (XHTML) (2) Preformatting text: Here is 20 spaces Address: Al. Politechniki 11 Box over text: Box over text Table of contents first element second element third element
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Special characters NoNameDescriptionVisualized as &&Ampersand& <<Less than< >>Greater than> Non-breaking space Full list is easy to find in Internet.
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Hyperlinks Label: Hyperlink: Some description Hyperlink to label: Some description Other hyperlinks:...
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Hyperlink as an Write to the author... Send
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Hyperlink as a bitmap Other shapes:
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Unordered list First point Second point Third point Point 1 Point 2 Point 2.1 Point 2.2 Point Point Point 3 Point 1 Point 2 o Point 2.1 o Point 2.2 Point Point Point 3 =>
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Ordered list First point Second point Third point Numbering type: big latin letters small latin letters big roman numerals small roman numerals arabian numerals Start of numbering: 1.First point 2.Second point 3.Third point =>
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Definition list first term first term explanation second term second term explanation Visualised as: first term first term explanation second term second term explanation
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Tables table starts here start of first row start of first column end of first column start of second column end of second column end of first row start of second row start of first column end of first column start of second column end of second column end of second row table ends here It is not correct table definition!
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Table attributes - border width - cell spacing - cell padding - table width Horizontal align: Merging cells:
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Nested tables AAA BBB CCC DDD
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Header, footer and body of the table It is header Some cell It is footer
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Outside borders Outside borders: x=void - no outside border x=above - only upper border x=below - only lower border x=vsides - left and right border x=hsides - upper and lower border. x=lhs - left border x=rhs - right border. x=box - all borders
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Inside borders Inside borders: x=none - no borders x=rows - only horizontal borders x=cols - only vertical borders x=all - all borders
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " DMCS Some text for browsers, which don't support frames
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Frames(2) Frame spacing and frame borders: Scrollbars: - scrollbars always visible - scrollbars never visible - scrollbars visible when needed Blocking changes of frame size: Nesting frames:
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Inline frames Your browser doesn't support inline frames!
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Grouping elements, – grouping elements - local grouping - logical grouping Examples: some text some other text some text OR: text some other text some text
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Images Width and height: Borders: Spacing from other elements: Is there any sense to make image smaller than original?
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Multimedia objects Flash: MP3: WAV:
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Forms.... Attributes: action - address of the resource, where the form will be sent (the same page, other page, or just other url). Requiered attribute. method - HTTP method (usually GET or POST) enctype - encoding standard. Default value: application/x-www-form-urlencoded. If form consist from at list one field of type file, enctype should be: multipart/form- data.
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Input fields Text field: Button: Attributes: type - type. Default type is text. Allowed types: text, password, checkbox, radio, submit, reset, file, hidden, image, button. name - name of the field value - usually default value size - size in pixels or characters
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Select i textarea fields Textarea: Select: one two Multiple choice select:
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Scripts and styles <!-- body {margin-left: 2cm; margin-right: 2cm} P {font-size: 14pt; font-family: Arial, Helvetica; font-weight: normal} --> function pushbutton() { alert("Hello!"); }
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. Web 1.0 / 2.0 / XHTML,CSS AJAX/SOAP/Web Serices/JSON RDF "Tom is Mary's husband"
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Podstawy. HTML i XHTML. WEB 2.0/AJAX/Web Services/JSON Used for Rich User Interface creation Fast response on queries Dynamic content creation Unavailable in previous web applications Possibility of development user interface comparable to stand-alone technologies
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych Podstawy. HTML i XHTML Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Projektowanie warstwy klienckiej aplikacji internetowych Podstawy. HTML i XHTML Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Politechnika Łódzka, ul. Żeromskiego 116, Łódź, tel. (042)