This document provides an introduction to web technologies and HTML. It discusses the differences between the Internet and the World Wide Web. It then covers the history and origins of the web from Ted Nelson's work on hypertext to Tim Berners-Lee creating HTTP and HTML. The document proceeds to explain key web concepts like HTTP, URLs, HTML markup tags and elements, images, hyperlinks, tables, and directory structures for web projects.

1. Introduction to Web
Technologies
Lecture 1
Julie Iskander,
MSc. Communication and Electronics

2. Before we start?

3. Internet Vs. WWW
Internet
 World Wide network of
networks.
 Exchange information via
different protocols like
HTTP, FTP, SMTP, IMAP,
………..
The Web (www)
 A subset of the internet
 Uses HTTP to access and
exchange information.
 It is a collection of HTML
documents.

4. How it all Started?

5. Ted Nelson and HyperText

6. Tim Berners Lee

7. How the web works, using
HTTP?

8. HTTP
 Characteristics:
1.
2.
3.
Connectionless
Media Independent
Stateless

9. HTTP Request

10. HTTP Request Example

11. HTTP Response

12. HTTP Response Example

13. HTML
Hyper Text Markup
Language

14. HTML
 Not a programming language but a MARKUP Language.
 Uses tags and keywords.
 It is a text file that is saved .html, can be edited with any
text editor.
 It is viewed in a browser
 It is used for structuring contents of a web page
 No layout or styles must be used in HTML (only in css
files)

15. HTML Markup
HTML Elements
 HTML document is a tree with one node (html node)
 Built on tags < and >
 HTML document is made up of elements
 Elements has an opening tag with name and has content.
<name> Content Here </name>
 Content can be text or another tag
 Examples:
<b> This text appears bold </b>
<em>emphasized text</em>

16. HTML Markup (Cont’d)
HTML attributes
 HTML attributes are modifiers of HTML elements,
in name-value pair format. It is recommended to
put values in double quotations.
name=“value”
<tag attr=“value”>content</tag>
 Examples:
<a href=http://www.google.com> Go To Google </a>

17. HTML Markup (Cont’d)
Empty elements
 Has no close tags and no contents
 Has an open tag and attributes only
 Optionally the open tag can has a / at the end (XHTML)
 Examples:
<br> or <br />
<hr>
<img src=“earth.jpg” alt=“Picture of the earth”>

18. HTML Markup (Cont’d)
Comment Elements
 To insert comments in the source code.
 Are not displayed in the browsers.
<!--This is a comment. Comments are not displayed in
the browser-->

19. DEMO

20. HTML Document Structure

21. HTML Document Structure

22. DOCTYPE
 All doctypes can be found in:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

23. META

24. NOTES
 All whitespaces , tabs and newlines are interpreted as one
whitespace
 Except if inside <pre> tag
 To add a newline use <br>
 To add one whitespace use &nbsp; (escape character)
 To get a list of escape characters
 http://www.theukwebdesigncompany.com/articles/entity-escapecharacters.php

25. HTML Document Object
Model (DOM)
 A web browser:
 reads HTML documents (parsing phase)
 Then renders the document (rendering phase)
 Parsing phase:
 reads the markup in the document,
 breaks it down into components,
 builds a document object model (DOM) tree.
 Node: each object in the DOM tree (element nodes/text
nodes).
 Root node is the html element.
 There are child, parent, descendants, ancesters and sibling
nodes.

26. HTML Document Object
Model (DOM)
html
head
title
meta
body
h1
p
em
br

27. images
 <img src=“url” alt=“text” >
 Empty element
 alt is the alternate text that will appear when image isn’t
loaded yet.
 src is
An absolute URL - points to another web site (like
src="http://www.example.com/image.gif")
 A relative URL - points to a file within a web site (like
src="image.gif")


28. Hyperlinks
 Created using anchor <a> tag
 Links a webpage to others
 Link to External pages
<a href=http://www.google.com>Go to google</a>
 Link to pages in the same website
<a href=“pagesbooks.html”>Favourite Books</a>

29. Hyperlink (Cont’d)
 Link to a certain fragment in the current or another
page
<a href=“book1.html#ch1”>Chapter 1</a>
 We need to create an anchor with a name attribute to
identify it in the url.
<a name=“ch1”>Chapter 1</a>
 To link to send email, opens default email client
<a href=mailto:user@server.com>Press to send email</a>

30. DEMO

31. Tables
 Used to display tabular data
 Tables fit contents, don’t take all length
 Never use it to format content, better use tableless
approach with css

32. Tables

33. Tables

34. RowSpan and ColSpan

35. RowSpan and ColSpan

36. FrameSets and Frames
 This a self-study topic to be done as a homework for
lecture 1.
 A presentation on the topic is provided as a help.

37. DEMO

38. Project Directory structure
 Project Directory
 All .html files
 css Directory
 All .css files
 scripts Directory
 All .js and any other scripts files
 multimedia Directory
 images directory
 All images files
 Videos directory
 All video files
 Audio directory
 All audio files

39. References
 http://www.w3.org/TR/html-markup/
 http://www.w3.org/TR/html401/
 http://www.w3.org/TR/CSS21/
 http://www.w3.org/TR/CSS2/
 http://www.sitepoint.com/tag/css/