Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

Farhan Nisar University of Peshawar
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
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?
HTML popo.
HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Essentials for Design JavaScript Level One Michael Brooks
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
Understand Web Page Development Software Development Fundamentals LESSON 4.1.
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.
Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Internet Publishing / Dreamweaver Luke E. Reese CARRS
HCI 201 Week 5 Loose Ends. Agenda Image stuff Image stuff File stuff File stuff Bandwidth Bandwidth UNIX UNIX HTML HTML Design elements Design elements.
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and Frames.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
Chapter 14 Introduction to HTML
Chapter 14-Designing for the World Wide Web. Overview Introducing multimedia on the Web. Designing text for the Web. Creating images for the Web. Adding.
Multimedia and Web Technology Prepared by: Asst. Prof. Maryam Eskandari.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
HTML. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
1 HTML References: A HTML Tutorial: /HTMLPrimer.html
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
1 Essential HTML coding By Fadi Safieddine (Week 2)
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
Hypertext Markup Language HTML Hypertext is vaguely defined as interconnecting pieces of information in a non-sequential but usually relational, manner.
1 HTML محمد احمدی نیا 2 Of 43 What is HTML?  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Exploring the Digital Domain HTML Basics. HTML Hypertext Markup Language Standard (ASCII) text with embedded format codes Most HTML tags are paired Tags.
Chapter 8 Introduction to HTML and Applets Fundamentals of Java.
1 John Magee 9 November 2012 CS120 Lecture 17: The World Wide Web and HTML Web Publishing.
HTML: Hyptertext Markup Language Doman’s Sections.
Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language.
Introduction To HTML.  HTML stands for Hyper Text Markup Language.  HTML was developed by Tim Berners-Lee.  HTML is maintained by World Wide Web Consortium(W3C).
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
JavaScript - A Web Script Language Fred Durao
Chapter 2 Designing Web Pages With HTML JavaMethods An Introduction to Object-Oriented Programming Maria Litvin Gary Litvin Copyright © 2003 by Maria Litvin,
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
HTML(Hyper Text Markup Language) ByNaveen. Introduction HTML or Hyper Text Markup Language is the standard markup language Its used to create the web.
CSE 409 – Advanced Internet Technology 1 DISCUSSION OF BASIC HTML TAGS.
Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
Internet Publishing / Dreamweaver Luke E. Reese Biosystems & Ag. Engr. / CARRS
Introduction to the World Wide Web & Internet CIS 101.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring Forms, HTML5 layout.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
HTML for web designing short course. What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file must have an htm or html file extension.
HTML AN INTRODUCTION TO WEB PAGE PROGRAMMING. INTRODUCTION TO HTML With HTML you can create your own Web site. HTML stands for Hyper Text Markup Language.
OCR Computing OGAT Web Technologies. What OCR need you to know… You are expected to have a working knowledge of the above web languages.
Teaching slides Chapter 6. Chapter 6 Software user interface design & construction Contents Introduction Graphical user interface – Rich window based.
DHTML.
Objective % Select and utilize tools to design and develop websites.
Objective % Select and utilize tools to design and develop websites.
Computer communications
Presentation transcript:

Introduction to HTML

_______________________________________________________________________________________________________________ 2 Outline Key issues on website development Web page design and production techniques Overview of HTML Basic HTML tags on Web page design such as: Hyperlinks Hyperlinks Images & Image maps Images & Image maps HTML Tables HTML Tables HTML Frames HTML Frames HTML Forms HTML Forms Other advanced techniques such as Cascading Style sheets and JavaScript

_______________________________________________________________________________________________________________ 3 Important Factors in Website Development Major factors in website development: Content Content Usability Usability Download time Download time Browser compatibility Browser compatibility Screen size Screen size Navigation Navigation Audience Audience Data validation Data validation

_______________________________________________________________________________________________________________ 4 Additional Factors in Website Development Other factors which make up a usable user interface: System feedback System feedback Consistency Consistency Error prevention Error prevention Performance/efficiency Performance/efficiency User like/dislike User like/dislike Error recovery Error recovery

_______________________________________________________________________________________________________________ 5 Website Design & Production Major steps in Web page design and production: Define audiences and the information requirements Define audiences and the information requirements Develop logical design of the Web site Develop logical design of the Web site Develop the perceptual design Develop the perceptual design Content creation Content creation Programming Programming Posting and hosting the site Posting and hosting the site

_______________________________________________________________________________________________________________ 6 Overview of HTML Hypertext Markup Language (HTML) is a markup language for telling a Web browser how to format and display a Web page It is a subset of the Standard Generalized Markup Language (SGML) - a formal markup language for defining document format. HTML employs pre-defined tags to specify the format of a web page. For example, by putting the word “Italics” inside the tag pairs (i.e., Italics ), the word “Italics” will be displayed by the Web browser in Italics form.

_______________________________________________________________________________________________________________ 7 HTML – Basic Format The basic structure of a HTML document is formed by the following tags:

_______________________________________________________________________________________________________________ 8 Basic HTML tags and a simple example A simple web page A simple web page First level heading First level heading Second level heading Second level heading The font face is Courier and the font size is 15pt. The font face is Courier and the font size is 15pt. The font color is red. The font color is red. The text is in italic form. The text is in italic form. The text is underlined. The text is underlined. The text is expressed in bold face. The text is expressed in bold face. This is superscript and this is subscript. This is superscript and this is subscript. This text is blinking. This text is blinking.

_______________________________________________________________________________________________________________ 9 Simple example (cont’d) This is a simple bullet list: This is a simple bullet list: First item First item Second item Second item This is a simple numbered list: This is a simple numbered list: First item First item Second item Second item

_______________________________________________________________________________________________________________ 10 Snapshot of Sample Web Page

_______________________________________________________________________________________________________________ 11 Links Defined by. HREF gives the URL to be accessed (A is for Anchor) The URL can be absolute or relative: Art Art Science (in current directory) Science (in current directory) (go back one directory) (go back one directory) (in the root directory) (in the root directory) What are the differences?

_______________________________________________________________________________________________________________ 12 Images The two most commonly used graphics file formats for displaying images on a web page are GIF and JPEG There are 3 that are supported by almost all web browsers: GIF: GIF: Lossless compression Transparent Give 256 colors Support animation (animated GIF) Suitable for general-purpose images JPEG: JPEG: Lossy compression Supports “ million ” of colors Suitable for photos PNG: PNG: Similar to GIF without supporting animation Created to circumvent CompuServe's patents on the GIF file format

_______________________________________________________________________________________________________________ 13 Images (cont.) Here is an example of the image tag using all the attributes: SRC: URL of the image SRC: URL of the image ALT: image description during loading ALT: image description during loading HEIGHT: height of the image HEIGHT: height of the image WIDTH: width of the image WIDTH: width of the image BORDER: border size BORDER: border size ALIGN: alignment method ALIGN: alignment method You can also create an image link, e.g.,

_______________________________________________________________________________________________________________ 14 HTML Table The table tag is... The table tag is... The row tag is... The row tag is... The heading tag is... The heading tag is... The data cell tag is... The data cell tag is... Following is an example of a simple table incorporating the table tags and other common attributes.

_______________________________________________________________________________________________________________ 15 Table Example

_______________________________________________________________________________________________________________ 16 What Are HTML Forms? Forms are generally used to obtain data from the client for submission to the server. Typically, a program in the server is invoked to process the data, possibly with the assistance of the backend system. The result (in most cases, an HTML file) will then be passed to the web client by using the HTTP.

_______________________________________________________________________________________________________________ 17 HTML Forms – General Format General format: Form input elements Form input elements Regular HTML content Regular HTML content ACTION: URL of the program for processing the form data ACTION: URL of the program for processing the form data METHOD: methods for passing data to the server: METHOD: methods for passing data to the server: GET: attach at the end of the URL POST: embed in the HTTP request message

_______________________________________________________________________________________________________________ 18 Common HTML Form Elements Common HTML Form elements include: Textbox Textbox Password textbox Password textbox Checkbox Checkbox Radio button Radio button Submit button Submit button File input field File input field Hidden form field Hidden form field Textarea Textarea Select menu Select menu

_______________________________________________________________________________________________________________ 19 Cascading Style Sheets (CSS) In HTML 4.0, Cascading Style Sheets (CSS) became available to separate the style from the structure By using CSS, a single style sheet can be applied to several web pages requiring the same style There are three types of CSS, namely external style sheets; external style sheets; embedded style sheets; embedded style sheets; inline style sheets. inline style sheets.

_______________________________________________________________________________________________________________ 20 JavaScript JavaScript is a scripting language created by Netscape to enhance the functions of HTML It was originally known as LiveScript, but Netscape convinced Sun to let it use Java in the language name to capitalize on Sun’s promotion of the Java language It was originally known as LiveScript, but Netscape convinced Sun to let it use Java in the language name to capitalize on Sun’s promotion of the Java language Currently called ECMAScript and has been standardized, but still most commonly called JavaScript Currently called ECMAScript and has been standardized, but still most commonly called JavaScript It can be used to produce interactive and dynamic Web pages It is supported by most commonly-used browsers including Internet Explorer and Netscape’s Navigator. Unlike the server-side programs, a JavaScript code is included in an HTML document and executed on the client-side