• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML and CSS part 1

HTML and CSS part 1



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

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



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.docshut.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Root has only 2 children , nothing is outside these 2 tags 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 HTML and CSS part 1 Presentation Transcript

  • 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, SMTP, IMAP, ……….. The Web (www)  A subset of the internet  Uses HTTP to access and exchange information.  It is a collection of HTML documents.
  • 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, 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)
  • 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>
  • 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>
  • 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”>
  • 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-->
  • 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 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
  • 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.
  • 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 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") 
  • 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>
  • 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>
  • DEMO
  • 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
  • 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 provided as a help.
  • DEMO
  • 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
  • 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/