Creation and Design of Web Pages I

Transcription

1 Creation and Design of Web Pages I Novak NOVAKOVIĆ October 25, novak.novakovic@loria.fr

2 Course Overview 2x2 hours CM + 6x2 hours TP over 7 days 2 ECTS credits substantial part of the course is individual work course material: slides (will be provided) + your notes + individual work guidelines (will be provided) + online reference manuals (will be provided) assessment: student project - 40% 1 hour - written exam - 60%

3 Motivation Why should you learn about creation and design of web pages? Internet and WWW are for sure one of the most important recent achievements of our civilization professional life of many people today includes presentation of the work on the internet today WWW services are industry of billions of AC, more than budgets of many countries (more on this in Part II of the lecture) it will enable you to communicate your personal creativity to the largest audience in the world!

4 Brief History and Some Important Concepts Internet after Russian satellite Sputnik was launched in 1957, US president Eisenhower formed DARPA (Defense Advanced Research Projects Agency) to advance computer networking and communication ARPANET in 1969 between several university centers in US most important concepts established, package switching, TCP/IP - Internet TCP/IP - Transfer Communication Protocol / Internet Protocol 5 layers of specification form hardware requirements (voltage, frequencies, etc.) to end-user interfaces

5 Brief History and Some Important Concepts World Wide Web the idea of Hypertext dates back to 60s it is text, displayed on a computer, with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or keypress sequence Tim Berners-Lee first suggested fusion of Internet and Hypertext in 1990 by the end of the same year he created the most important concepts a browser called WorldWideWeb and the world s first web server, later known as CERN httpd, which ran on NeXTSTEP World Wide Web Consortium - established (DARPA, MIT, European Comission) to regulate further development of the many technologies involved (HTTP, HTML, etc.) through a standardization process.

6 Brief History and Some Important Concepts Around 24% of population uses Internet (Africa 7%, Europe 50%, North America 74%) One trillion web pages! (10 12!)

7 Conceptual Scheme of WWW (Simplified) there is a large number of computers, Web Servers, that are mutually connected by coper cables, fiber optics, wireless signals, whose communication is standardized on their local filesystem they contain large amount of Hypertext data of interest to end-users Web Clients in a standardized format (usually) HTML a client sends request to a remote server for some data, say a Web page the request is communicated through the network of computers (routing of packages) to the appropriate server data is retrieved in HTML format on the clients computer, and parsed by a Web Browser to produce the required visual Hypertext content

8 Web Browsing A Web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. user inputs a Uniform Resource Identifier (URI) with a content request prefix can be: http(s) for (secure) HTTP transfer of hypertext, ftp for transfer of files, mailto for sending s, file for local files, etc. once the resource has been retrieved the web browser will display it. HTML is passed to the browser s layout engine to be transformed from markup to an interactive document. most browsers can display images, audio, video, and XML files, and often have plug-ins to support Flash applications and Java applets. browsers Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, and Opera (most popular); Google Android, Nokia S60 and Palm WebOS (browsers for mobile platforms); WorldWideWeb (the first browser), NCSA Mosaic and Netscape Navigator (90s), Lynx (text-only), etc.

9 Short Glossary Internet - a global system of interconnected computer networks standardized by TCP/IP WWW a software infrastructure layered on top of the Internet designed for managing Hypertext content HTTP HyperText Transport Protocol, layered on top of TCP (application level) HTML HyperText Markup Language, for specifying hypertext content (= web pages) Browser a program for retrieving hypertext content and parsing HTML files (and more!)

10 Hypertext Markup Language - HTML in order to provide Hypertext features, it performs markup of the text that is intended for display content is tagged using tags if the form <TAG> tags can contain attributes for specifying additional parameters for the presentation of the content consequently, creating a web page is not what you see is what you get (wysiwyg), it is what you see is what you mean however...

11 Hypertext Markup Language - HTML...however, there exist design-assistant software that provides interaction in both ways between HTML source code and the output design not only that they are able to produce output from the HTML code, they can modify the original HTML code from the manipulation of the output most widely used: Microsoft Frontpage (part of the Office package) and Adobe (previously Macromedia) Dreamweaver

12 HTML Page Structure <HTML> <HEAD> <TITLE> NN s web! </TITLE> </HEAD> <BODY> <H1> Hello World </H1> <! Rest of page goes here. This is a comment. > </BODY> </HTML>

13 BODY Element <BODY attributename= attributevalue > Deprecated attributes (but still used) BACKGROUND= Sunset.jpg (can be tiled) BGCOLOR=color TEXT=color LINK=color (unvisited links) VLINK=color (visited links) ALINK=color (when selected)

14 Headings <H1...>text </H1> largest of the six <H2...>text </H2> <H3...>text </H3> <H4...>text </H4> <H5...>text </H5> <H6...>text </H6> smallest of the six ALIGN= position left (default), center or right

15 Headings <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1> Level-1 (H1)</H1> <H2 ALIGN= center > Level-2 (H2)</H2> <H3> <U>Level-3 (H3)</U></H3> <H4 ALIGN= right > Level-4 (H4)</H4> <H5> Level-5 (H5)</H5> <H6> Level-6 (H6)</H6> </BODY> </HTML>

16 Paragraph <P>defines a paragraph Add ALIGN= position (left, center, right) Multiple <P> s do not create blank lines Use <BR>for blank line Fully-specified text uses <P>and </P> But </P>is optional

17 Paragraph <BODY> <P>Here is some text </P> <P ALIGN="center"> Centered text </P> <P><P><P> <P ALIGN="right"> Right-justified text <! Note: no closing /P tag is not a problem> </BODY>

18 <Pre >formated text <PRE> if (a < b) { a++; b = c * d; } else { a--; b = (b-1)/2; } </PRE>

19 Special characters Character Use < < > > & & " Space

20 Colors Values for BGCOLOR and COLOR many are predefined (red, blue, green,...) all colors can be specified as a six character hexadecimal value: RRGGBB FF red gray dark green FFFF00 - yellow

21 Fonts 1 <FONT COLOR="red" SIZE="2" FACE="Times Roman"> This is the text of line one </FONT> <FONT COLOR="green" SIZE="4" FACE="Arial"> Line two contains this text </FONT> <FONT COLOR="blue" SIZE="6" FACE="Courier" The third line has this additional text </FONT> 1 Note: <FONT>is now deprecated in favor of CSS.

22 Ordered (Numbered) Lists <OL TYPE="1"> <LI> Item one </LI> <LI> Item two </LI> <OL TYPE="I" > <LI> Sublist item one </LI> <LI> Sublist item two </LI> <OL TYPE="i"> <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI> </OL> </OL> </OL>

23 Unordered (Bulleted) Lists <UL TYPE="disc"> <LI> One </LI> <LI> Two </LI> <UL TYPE="circle"> <LI> Three </LI> <LI> Four </LI> <UL TYPE="square"> <LI> Five </LI> <LI> Six </LI> </UL> </UL> </UL>

24 Physical Character Styles <H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f₀+ f₁<br> Superscripts: x²+ y²<br> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR= GRAY >Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR>

25 Logical Character Styles <H1>Logical Character Styles</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE>Emphasized Code</CODE></EM> <BR> <FONT COLOR= GRAY ><CITE>Gray Citation </CITE></FONT><BR> <ACRONYM TITLE= Java Development Kit >JDK Acronym</ACRONYM>

26 <A>Anchors (HyperLinks) Link to an absolute URL: If you get spam, contact <A HREF= htttp: > Microsoft </A>to report the problem. Link to a relative URL: See these <A HREF= #references >references </A> concerning our fine products. Link to a section within a URL: Amazon provided a <A HREF= > reference for our company. </A>

27 Naming a Section <H2><A NAME= #references >Our References </A></H2>

28 Hyperlinks <BODY> <H3>Welcome to <A HREF=" <STRONG>Computer Science</STRONG></A> at the <A HREF=" of Virginia.</A> </H3> </BODY>

29 Images SRC is required WIDTH, HEIGHT may be in units of pixels or percentage of page or frame WIDTH= 357 HEIGHT= 50% Images scale to fit the space allowed

30 Images Align=position Left Right Top Bottom Middle Image/Text Placement Image on left edge; text flows to right of image Image on right edge; text flows to left Image is left; words align with top of image Image is left; words align with bottom of image Words align with middle of image

31 Images <BODY> <img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphin jump!"> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> You can see text wrap around it<br> </BODY> </HTML>

32 Align = left

33 Align = right

34 Align = bottom

35 Tables <TABLE> <CAPTION > <TR> <TH> <TD> table tag optional table title table row table column header table data element

36 Table <TABLE BORDER=1> <CAPTION>Table Caption</CAPTION> <TR><TH>Heading1</TH> <TH>Heading2</TH></TR> <TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR> <TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR> <TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR> </TABLE>

37 <TABLE>Element Attributes ALIGN=position left, center, right for table BORDER=number width in pixels of border (including any cell spacing, default 0) CELLSPACING=number spacing in pixels between cells, default about 3 CELLPADDING=number space in pixels between cell border and table element, default about 1 WIDTH=number[%] width in pixels or percentage of page/frame width

38 <TABLE>Element Attributes cellspacing=10 cellpadding=10

39 <TABLE>Element Attributes EX: BGCOLOR=color background color of table, also valid for <TR>, <TH>, and <TD> RULES=value which internal lines are shown; values are none, rows, cols, and all (default) <TABLE COLS= 40%, *,* > <TABLE ROWS= *,* >

40 <TR >Element Attributes Validforthetablerow : ALIGN left, center, right VALIGN top, middle, bottom BGCOLOR backgroundcolor <TABLE ALIGN="center" WIDTH="300" HEIGHT="200"> <TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD> <TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD <TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD> </TABLE>

41 <TD >Table Cell Attributes Valid for the table cell: colspan how many columns this cell occupies rowspan how many rows this cell occupies <TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1"> <TR> <TD colspan="1" rowspan="2">a</td> <TD colspan="1" rowspan="1">b</td> </TR> <TR> <TD colspan="1" rowspan="1">c</td> </TR> </TABLE>

42 Frames Frames help control navigation and display <FRAME >attributes include FRAMEBORDER yes or 1 for borders FRAMESPACING width of border BORDERCOLOR color SRC location of HTML to display in frame NAME destination for TARGET attribute

43 Frames MARGINWIDTH left/right margins MARGINHEIGHT top/bottom margins SCROLLING yes or 1 adds scroll bar NORESIZE yes or 1 disables resizing

44 Frames <FRAMESET ROWS="75%,25%" <FRAMESET COLS="*,*,*"> <FRAME SRC=" <FRAME SRC=" <FRAME SRC=" </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC=" <FRAME SRC=" </FRAMESET> </FRAMESET>

45 Frames <FRAMESET ROWS="25%,75%" <FRAMESET COLS="*,*,*"> <FRAME SRC=" <FRAME SRC=" <FRAME SRC=" </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC=" <FRAME SRC=" </FRAMESET> </FRAMESET>

46 Frames <FRAMESET ROWS="*,*"> <FRAMESET COLS="15%, 2*, *"> <FRAME SRC=" <FRAME SRC=" <FRAME SRC=" </FRAMESET> <FRAMESET COLS="40%, *"> <FRAME SRC=" <FRAME SRC=" </FRAMESET> </FRAMESET>

47 Some Examples Dreanweaver Demos...

48 Cascading Style Sheets - CSS A powerful way to specify styles and formatting across all documents in a web site Style sheets can be specified inline or as a separate document Helps to keep a common look and feel Step towards separation of the actual information and the way it is presented

49 CSS Syntax General form selector {property: value} Ex. body {color: black} p {font-family: sans serif } p {text-align:center;color:red}

50 External Style Sheets Styles are specified in an external file. This is the most common and useful way of using style specifications. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>...

51 Internal Style Sheets Styles are specified inside the header of the HTML document. <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>...

52 Inline Styles A style is applied to only one occurrence of an element. <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> (Use this method sparingly!)

53 Multiple Tags You can set a property for more than one element (tag) at a time. Ex. h1, h2, h3 {color: green;}

54 Class Selector With the class selector you can set different styles for the same type of HTML element. Ex. p.right {text-align: right} p.center {text-align: center} <p class= right > This paragraph will be right-aligned. </p> <p class= center > This paragraph will be center-aligned. </p>

55 Class Selector You can omit the tag name to define the style for all HTML elements with a certain class. Ex..center {text-align: center} <h1 class= center > This heading will be center-aligned </h1> <p class= center > This paragraph will also be center-aligned. </p>

56 Id Selector You can define styles for HTML elements with a certain id attribute. Ex.1 Ex.2 #verde {color: green} p#rojo { text-align: center; color: red } <h1 id= verde > This heading will be green </h1> <p id= verde > This paragraph will also be green</p> <h1 id= verde > This heading will be green </h1> <p id= verde > This paragraph will also be green</p>

57 Pseudo Classes A link that is active, visited, unvisited, or when the mouse is above it can be displayed differently using CSS. selector:pseudo-class {property: value} Ex. a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */

58 CSS Comments CSS comments start with a /* and end with */ Ex. /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }

59 Background The CSS background properties allows you to change background color of an element set an image as the background repeat a background image vertically or horizontally position an image on a page.

60 Example

61 Example

62 Text The CSS text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a paragraph, and more.

63 Example

64 Font The CSS font properties allow you to change the font family, boldness, size, and the style of a text.

65 Example

66 Border, Margin, Padding Border Specify the style and color of an element s border Margin Specify space around elements Padding Specify space between the element border and the element content

67 Margin

68 List Allow you to change between various list item markers.

69 Some Examples Dreanweaver Demos...