Introduction to Web
Technologies
Lecture 1
Julie Iskander,
MSc. Communication and Electronics
Before we start?
Internet Vs. WWW
Internet
 World Wide network of
networks.
 Exchange information via
different protocols like
HTTP, FTP,...
How it all Started?
Ted Nelson and HyperText
Tim Berners Lee
How the web works, using
HTTP?
HTTP
 Characteristics:
1.
2.
3.

Connectionless
Media Independent
Stateless
HTTP Request
HTTP Request Example
HTTP Response
HTTP Response Example
HTML
Hyper Text Markup
Language
HTML
 Not a programming language but a MARKUP Language.
 Uses tags and keywords.
 It is a text file that is saved .html...
HTML Markup
HTML Elements
 HTML document is a tree with one node (html node)
 Built on tags < and >
 HTML document is m...
HTML Markup (Cont’d)
HTML attributes
 HTML attributes are modifiers of HTML elements,
in name-value pair format. It is re...
HTML Markup (Cont’d)
Empty elements
 Has no close tags and no contents
 Has an open tag and attributes only

 Optionall...
HTML Markup (Cont’d)
Comment Elements
 To insert comments in the source code.
 Are not displayed in the browsers.
<!--Th...
DEMO
HTML Document Structure
HTML Document Structure
DOCTYPE
 All doctypes can be found in:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
META
NOTES
 All whitespaces , tabs and newlines are interpreted as one
whitespace
 Except if inside <pre> tag
 To add a newl...
HTML Document Object
Model (DOM)
 A web browser:
 reads HTML documents (parsing phase)
 Then renders the document (rend...
HTML Document Object
Model (DOM)
html

head
title

meta

body
h1

p
em

br
images
 <img src=“url” alt=“text” >
 Empty element
 alt is the alternate text that will appear when image isn’t
loaded ...
Hyperlinks
 Created using anchor <a> tag

 Links a webpage to others
 Link to External pages
<a href=http://www.google....
Hyperlink (Cont’d)
 Link to a certain fragment in the current or another
page
<a href=“book1.html#ch1”>Chapter 1</a>
 We...
DEMO
Tables
 Used to display tabular data
 Tables fit contents, don’t take all length
 Never use it to format content, bette...
Tables
Tables
RowSpan and ColSpan
RowSpan and ColSpan
FrameSets and Frames
 This a self-study topic to be done as a homework for
lecture 1.
 A presentation on the topic is pr...
DEMO
Project Directory structure
 Project Directory

 All .html files
 css Directory
 All .css files

 scripts Directory
...
References
 http://www.w3.org/TR/html-markup/
 http://www.w3.org/TR/html401/
 http://www.w3.org/TR/CSS21/
 http://www....
Upcoming SlideShare
Loading in …5
×

HTML and CSS part 1

1,463 views

Published on

Lecture 1 presented an introduction to web technology and a brief on HTML

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,463
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • HyperText: is text which is not constrained to be linear. A text which is contains links to other text, non-sequential writing.Term invented by Ted Nelson in his project Xanada.Hypermedia: is hypertext including graphics, video and sound.
  • In the early nineties, worked on a hypertext GUI browser and editor , named “World Wide Web”
  • HTTP (Hyper Text Transfer Protocol) is the main part of the web. A protocol for communicating between browser and web server.TCP/IP communication protocol to deliver all files and data (HTML files, images …….)
  • Connectionless  each http request is independent of any preceding or subsequent requests. After sending a request the client is disconnected from the server.Media Independent  any data can be sent as long as client and server can handle it.Stateless  since it is connectionless, server and client don’t remember each other after the end of the request.
  • Crcarriage return \r ascii 13Lf line feed \n ascii 10Example: GET /index.html HTTP/1.1Host:www.google.comUser-Agent:Mozilla/3.0Last-Modified:Fri, 3 Dec 1999 22:22:34 GMTMethods GET  retrieve information identified by Request URI POST  accept entity enclosed in request as a HEAD no message body is sent in the response DELETE  request the origin server delete the resource identified request URI PUT request that enclosed entity be stored under the supplied request URI
  • PopularStatus codes and phrases, 1xx  informational,2xxSuccess, 3xxRedirection, 4xxclient error, 5xxserver error 200 OK 201 created 301 Moved Permeanantly 400 Bad Request 401 UnAuthorized 404 Not Found 505 http version not supported
  • Brief HistoryLate 80’s Tim Berner Lee wrote first HTML1994 HTML 2, Netscape is formed1995 HTML 3, MS IE came out, Netscape proposed frames1997 HTML 3.2 then start on HTML 41999 HTML 4.012000 XHTML 1.0, 2001 XHTML 1.1 , 2009 abandoned XHTML 22008 start on HTML 5
  • Separation of concernsHTML  Content onlyCSS  presentation
  • ML is annoted text so computer can manipulate the text, are human readable.
  • Create a .html file try simple tagsa,h1,h2,p,br,hr,em,address,pre
  • Only one root &lt;html&gt;Root has only 2 children &lt;head&gt;, &lt;body&gt; nothing is outside these 2 tags&lt;head&gt; contains tags that provide information to the browser and search engines, links to css and js external files
  • Create a .html file try simple tagsa,h1,h2,p,br,hr,em,address,pre
  • Note: borders are added for better illustration but the code will not create them
  • Create a .html file try simple tagsa,h1,h2,p,br,hr,em,address,pre
  • HTML and CSS part 1

    1. 1. Introduction to Web Technologies Lecture 1 Julie Iskander, MSc. Communication and Electronics
    2. 2. Before we start?
    3. 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. 4. How it all Started?
    5. 5. Ted Nelson and HyperText
    6. 6. Tim Berners Lee
    7. 7. How the web works, using HTTP?
    8. 8. HTTP  Characteristics: 1. 2. 3. Connectionless Media Independent Stateless
    9. 9. HTTP Request
    10. 10. HTTP Request Example
    11. 11. HTTP Response
    12. 12. HTTP Response Example
    13. 13. HTML Hyper Text Markup Language
    14. 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. 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. 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. 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. 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. 19. DEMO
    20. 20. HTML Document Structure
    21. 21. HTML Document Structure
    22. 22. DOCTYPE  All doctypes can be found in: http://www.w3.org/QA/2002/04/valid-dtd-list.html
    23. 23. META
    24. 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. 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. 26. HTML Document Object Model (DOM) html head title meta body h1 p em br
    27. 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. 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. 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. 30. DEMO
    31. 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. 32. Tables
    33. 33. Tables
    34. 34. RowSpan and ColSpan
    35. 35. RowSpan and ColSpan
    36. 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. 37. DEMO
    38. 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. 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/

    ×