Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Systems & Technologies

Published by簪蜜 寇 Modified over 7 years ago

Similar presentations

Presentation on theme: "Web Systems & Technologies"— Presentation transcript:

1 Web Systems & Technologies
CS Prepared By: Junaid Hassan Lecturer at UOS M.B.Din Campus

2 Introduction to HTTP, HTML & HTML5 tags, dynamic web content
Topics: Introduction to HTTP, HTML & HTML5 tags, dynamic web content

3 Intro to HTTP: Hyper text transfer protocol is a client-server network protocol used by the World Wide Web since 1990 Request-Response protocol Browser sends request messages for images, texts, scripts, styles etc Web server respond to these request messages with requested resurce Web pages will usually generate multiple HTTP requests to load different type of data

4 Important HTML Tags: <!DOCTYPE html>, <head>, <title>, <link>, <meta>, <style>, <script>, <body> <a>, <img>, <p>, <h1> - <h6>, <hr>, <br>, <ol>, <ul>, <li>,<div>, <b>, <!-- → <blockquote>, <button>, <code> <form>, <input>, <textarea>, <label>, <select> <span>, <iframe>, <em>, <abbr> <table>, <th>, <tr>, <td>, <thead>,<tfoot>

5 Important HTML5 Tags: <article>, <aside>, <audio>, <video>, <bdi>, <canvas>, <details>, <dialog> <embed>, <figure>, <figcaption> <header>, <footer>, <main>, <nav>, <section>, <source> <output>, <progress>, <time> For complete list of HTML & HTML5 tags:

6 Block Level vs Inline Elements:
Block level elements starts on a new line and takes up the full available width e.g <div>, <p>, <h1> - <h6> and <form> elements Inline elements only takes up as much width as necessary and does not start on a new line e.g <span>, <a>, <img> elements

7 Dynamic Web Content: Page content is changed according to the dynamic requirements Dynamic web content is generated in 3 steps Data presentation (html, css, js) PHP code interpreter (web server) Fetching data from database (MySQL) Dynamic web content is generated using server side programming language PHP PHP interpreter reads the PHP code and fetches data from the database Facebook home page example

8 Assignment: Define and Give Short Explanation of following: Www
Web pages Web sites Web applications TCP/IP, TCP/IP application Web services Web servers

9 References: https://www.httpwatch.com/httpgallery/introduction/

Download ppt "Web Systems & Technologies"

Similar presentations

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.

HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
OULU ADVANCED RESEARCH ON SOFTWARE AND INFORMATION SYSTEMS Teppo Räisänen | Oulu University of Applied Sciences Facebook Markup Language - FBML Teppo Räisänen.

OULU ADVANCED RESEARCH ON SOFTWARE AND INFORMATION SYSTEMS Teppo Räisänen | Oulu University of Applied Sciences Facebook Markup Language - FBML Teppo Räisänen.
CSCI 3100 Tutorial 6 Web Development Tools 1 Cuiyun GAO 1.

CSCI 3100 Tutorial 6 Web Development Tools 1 Cuiyun GAO 1.
Neal Stublen Content Models  Metadata content Data not necessarily presented on the page ○ title, link, meta, style  Flow content.

Neal Stublen Content Models  Metadata content Data not necessarily presented on the page ○ title, link, meta, style  Flow content.
A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / 2011-02-21 1Chris Greenhalgh

A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh
World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server.

World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server.
Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML
Additional Topics. Tutorial #9 Review – Forms Forms Legend and fieldset Fields Text Email Password Radio buttons, check box, text area, select lists Buttons.

Additional Topics. Tutorial #9 Review – Forms Forms Legend and fieldset Fields Text Password Radio buttons, check box, text area, select lists Buttons.
With your friendly Web Developer, Chris.. Terminology  HTML - > Hypertext Markup Language  CSS -> Cascading Style Sheet  open tag  close tag  HTTP->Hypertext.

With your friendly Web Developer, Chris.. Terminology  HTML - > Hypertext Markup Language  CSS -> Cascading Style Sheet  open tag  close tag  HTTP->Hypertext.
HTML Hyper-Text Markup Language or tags. HTML is a “tag” language Open and close tags Tags identified with angle brackets Basic format content (shorthand.

HTML Hyper-Text Markup Language or tags. HTML is a “tag” language Open and close tags Tags identified with angle brackets Basic format content (shorthand.
NASRULLAH KHAN.  Lecturer : Nasrullah   Website :http://iba-s13-cse308.wikispaces.com.

NASRULLAH KHAN.  Lecturer : Nasrullah   Website :
HTML tips BTM 395: Internet Programming. Components of website development Content Structure Format and design Dynamics and interactivity –Forms –Client-side.

HTML tips BTM 395: Internet Programming. Components of website development Content Structure Format and design Dynamics and interactivity –Forms –Client-side.
HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,

HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,
HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.

HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.
Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.

Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.
CA 272 - Professional Web Site Development Class 2: Anatomy of a Web Site and Web Page & Intro to HTML.

CA Professional Web Site Development Class 2: Anatomy of a Web Site and Web Page & Intro to HTML.
Schedule Introduction to Web & Database Integration Tools and Resources HTML and Styles Forms and Client-Side Scripts DB Engines Forms Processing and Server-Side.

Schedule Introduction to Web & Database Integration Tools and Resources HTML and Styles Forms and Client-Side Scripts DB Engines Forms Processing and Server-Side.
HTML HyperText Markup Language ©Richard L. Goldman July 15, 2003.

HTML HyperText Markup Language ©Richard L. Goldman July 15, 2003.
Flow content – текст и тэги:  a  abbr  address  area (если в тэге map)  article  aside  audio  b  bdi  bdo  blockquote  br  button  canvas.

Flow content – текст и тэги:  a  abbr  address  area (если в тэге map)  article  aside  audio  b  bdi  bdo  blockquote  br  button  canvas.

Similar presentations

Ads by Google