1 HTML – HyperText Markup Language Representation and Management of Data on the Internet

2 The World-Wide Web Based on 1.A uniform naming scheme for locating resources on the Web (e.g., URIs) 2.Protocols, for access to named resources over the Web (e.g., HTTP) 3.Hypertext, for easy navigation among resources (e.g., HTML)

3 URI’s URIs typically consist of three pieces: 1.The naming scheme of the mechanism used to access the resource 2.The name of the machine hosting the resource 3.The name of the resource itself, given as a path

4 HTML –HyperText Markup Language –Not a procedural programming language like C, Fortran, Cobol or Pascal –Markup language Identify elements of a page so that a browser can render that page on your computer screen Presentation of a document vs. structure

5 HTML HTML gives authors the means to: –Publish online documents with headings, text, tables, lists, photos, etc –Retrieve online information via hypertext links, at the click of a button –Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc –Include spread-sheets, video clips, sound clips, and other applications directly in their documents

6 Markup Languages Markup language –Used to format text and information HTML –Marked up with elements, delineated by tags –Tags: keywords contained in pairs of angle brackets HTML tags –Not case sensitive –Can have attributes Forgetting to close tags is a syntax error

7 HTML Files HTML files –.htm or.html extensions –File name of your home page should be index.html Errors in HTML –Usually not fatal

8 Hello World My first HTML document Hello world! DTD Document HEAD + BODY

9 HEAD & BODY HEAD section –Info about the document –Info in header not generally rendered in display window –TITLE element names your Web page BODY section –Page content –Includes text, images, links, forms, etc. –Elements include backgrounds, link colors and font faces –P element forms a paragraph, blank line before and after

10 DTDs

11 Character Encoding Used to set the Document Character Set In the Browser you can see the encoding by “View>Encoding” or “View>Character Encoding” <meta http-equiv="content-type" content="text/html; charset=iso I"> <meta http-equiv="content-type" content="text/html; charset=iso I">

12 Hebrew In the Page You can use logical Hebrew: –charset=“windows-1255” –Only good in Explorer –Hebrew text is written from right to left You can use visual Hebrew: –charset=“iso ” –Can be seen in Netscape –Hebrew text is written from left to right Also needed align=“right”

13 Meta Information The META tag adds information about the document (rather than content) –name –http-equiv –content –schema <META scheme="ISBN" name="identifier“ content=" ">

14 META Can Help Search Engines

15 META for Automatic Loading For moving to the dbi page automatically after 10 seconds: For automatic loading of a sound file when loading the page

16 A study of population dynamics... document body... BODY

17 Body With Style A study of population dynamics BODY { background: white; color: black} A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia }... document body...

18 Headers –Simple form of text formatting –Vary text size based on the header’s “level” –Actual size of text of header element is selected by browser –Can vary significantly between browsers H1…H6

19 Text Types EM: Indicates emphasis STRONG: Indicates stronger emphasis CITE: Contains a citation or a reference to other sources DFN: Indicates that this is the defining instance of the enclosed term CODE: Designates a fragment of computer code SAMP: Designates sample output from programs, scripts, etc KBD: Indicates text to be entered by the user VAR: Indicates an instance of a variable or program argument ABBR: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.) ACRONYM: Indicates an acronym (e.g., WAC, radar, etc.)

20 Style Tags Bold Text Underlined Text Strike-Through Text Italic Text for superscript, for subscript and for size of text

21 Position Style - keeps white spaces - creates a block for an example (text pushed to the left) - a new paragraph - a line break

22 Another Example Untitled This is an example of an HTML page Here is an emphasized text and there is also italic text here. So now we can say: Hello world

23

24 Lists UL – Unordered List OL – Ordered list... Level one, number one Level two, number one Level two, number two Level three, number one Level two, number three Level one, number two...

25

26 Tables A test table with merged cells Average Red eyes height weight Males % Females %

27

28 Anchors Putting an anchor: … Creating a link text Global url Relative url A link to an anchor

29 More Types of Links Newsgroup instructions The same for ftp and telnet

30 Images Adding images to the page can be done using the IMG tag Am image can be used as a link

31 Image Map A picture is divided to several areas where each area is a link to a different place:

32 Frames A simple frameset document This frameset document contains: The lists page The tables page

33

34 Links in Frames The TARGET attribute can specify where the new link will be opened: –target=“frame-name” : in the specified frame –target=“_self” : in the frame where the link is –target=“_top” : in the same window over the whole screen –target-=“_blank” : in a new window of the navigator

35 Forms Adds to the document components for interactions with a server: –Buttons –Checkboxes –Radio buttons –Menus –Text inputs –File select

36 Forms <FORM action=" method="post"> First name: Last name: Male Female Your photo Mark to get updates by

37

38

39

40