HTML – part I
Maciej Grzenda, PhD
Warsaw University of Technology
Faculty of Mathematics and Information Science M.Grzenda@mini.pw.edu.pl
http://www.mini.pw.edu.pl/~grzendam
Web systems - introduction
Web server
1. request is sent
2. Document is read
Web browser
1. request is sent is read
3. Response (the document content or error) is received
0. the user wants to display a document
4. Response (e.g. a web page) is displayed to the user
In this case we assume that all the documents are static i.e. a priori prepared as files on a disk
The most important documents are HTML documents
Web systems – first labs
Web browser
1. A user wants to display a document
The HTML documents will be placed on a local disk and opened with File/Open file… rather than
2. The document is read
3. Response (e.g. a web page) is displayed to the user
Both HTML documents stored locally and accessed via HTTP are parsed and displayed in the same way.
with File/Open file… rather than by typing in the address of the web site
HTML tasks
• In this task and all the other
HTML/CSS/JavaScript tasks use any text editor you prefer, if possible with syntax highlighting feature such as Notepad++
highlighting feature such as Notepad++
• Verify whether your document is compliant with HTML standard and fix errors, if
necessary
Task 1 – first HTML document
Develop a web site similar to this one:
Task 1 – text content
Resources for Web Programming course
Resources for browser-side programming include both books and web resources. HTML - Hypertext Markup Language is a language used to define portable documents.
HTML documents that can be properly displayed on any operating system, in any browser (also text-based and mobile browsers).
Documents require web browser to be displayed to the user.
Books
• Deitel, P.J., JavaScript for Programmers, Pearson Education, 2010
• Lemay L. and Colburn R., Sams Teach Yourself Web Publishing with HTML & XHTML in 21 Days (4th Edition), 2003
• Schafer S.M., HTML, XHTML, and CSS Bible, Wiley Publishing, 2010 (also: HTML, XHTML i CSS, Helion, 2011)
• Schultz D., Cook C., Beginning HTML with CSS and XHTML: Modern Guide and Reference, Apress, 2007 (also: HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW, Helion, 2008)
• Zeldman J., Marcotte E., Designing with Web Standards. Third Edition, Pearson Education, 2010
Web resources 1. www.w3.org
2. www.w3schools.com 3. www.theserverside.com
4. www.javapassion.com This text can be used to develop your first document.
Task 1 – things to do
1. Develop your HTML document using lecture content and HTML reference available at
http://www.w3schools.com 2. Validate your document at 2. Validate your document at
http://validator.w3.org/check
3. If necessary use tidy to fix your document automatically at
http://infohound.net/tidy/tidy.pl
Task 1 – sample document to start from
Document type declaration Character encoding
Header Link to
another part of the same document Header (1st level)
End of line
Task 2 - images
Develop a web site similar to this one. Use IMG tag with different settings. Refer to
http://www.w3schols.com for a list of mandatory attributes.
Image maps
1. Different active regions can be defined within a picture.
2. They can be: rectangles, circles and polygons
3. A link is defined for every region.
4. When a user clicks somewhere in the (0,0)
4. When a user clicks somewhere in the region, a corresponding link is
activated, as with regular A links.
5. Coordinates of the regions are defined in pixels
6. More than one region with the same shape type (but not coordinates) is allowed.
7. A polygon can be used to approximate any shape other than a rectangle and a circle.
Image maps - details
<p>
<img
src="http://www.mini.pw.edu.pl/tikiwiki/images/m_logo.gif"
usemap="#first" alt="logo" width="150">
A picture with a reference to a map
(x,y,radius)
<map name="first" id="first">
<area shape="circle" coords="10,10,20"
href="http://www.oracle.com" alt="Oracle">
<area shape="rect" coords="100,100,120,150"
href="http://www.microsoft.com" alt="Microsoft">
<area shape="poly" coords="20,40,80,30,100,90"
href="http://www.w3.org" alt="Web Consortium">
</map>
</p>
(x,y,radius)
Polygon defined by (x1,y1,x2,y2,…)
Coordinates of
opposite corners
Task 3 – image maps
Develop an image map with the following layout of
active regions:
Task 4 - tables
Base cells can be merged.
Any content can be placed
inside incl. another table.
Task 5 - tables
Develop a web site similar to this one.
Link to the first document (result of task 1) placed on a picture
Hint: use embedded table and entity references
