Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 HTML Basics Dr. Awad Khalil Computer Science Department AUC.

Published byBuck Atkinson Modified over 8 years ago

Similar presentations

Presentation on theme: "1 HTML Basics Dr. Awad Khalil Computer Science Department AUC."— Presentation transcript:

1 1 HTML Basics Dr. Awad Khalil Computer Science Department AUC

2 2 Markup Languages SGML, the Standard Generalized Markup Language (1980), is a more powerful ancestor of XML. SGML is a text-based meta- language used to describe application languages. SGML is a text- based language that can be used to markup data – that is, add metadata – in a way which is self describing. Although SGML has many useful features, the complexity of SGML makes it extremely hard to use and learn. HTML, the HyperText Markup Language (1989), is one of the best known applications of SGML. HTML was defined to be a universal markup language for the display of information, and the linking of different pieces of information. The idea was that any HTML document (or web page) would be presentable in any application that was capable of understanding HTML (termed a web browser ).

3 3 HTML HTML is the document formatting language used to design most Web pages. It is a simple, yet powerful, platform-independent document language. Originally developed by Tim Berners-Lee while at CERN but was standardized in November 1995. In early 2000, W3C produced XHTML 1.0 as a reformulation of HTML 4 in XML.

4 4 DHTML Consists of number of technologies freely available for download Used for developing high-performance, Web-based applications  Much of application’s work performed directly on client rather then on server or Internet Two versions  Microsoft  Netscape

5 5 HTML HTML Tags: HTML tags cover formatting, structural, and semantic markup of an HTML document. Good morning Egypt In 1989, Tim Brayners developed the first version of HTML Page1 Good Morning, Egypt

6 6 HTML Document Structure

7 Outline 7 Main.html Program Output 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Welcome 11 12 13 14 Welcome to XHTML! 15 16 The text between the title tags appears as the title of the web page. Elements between the body tags of the html document appear in the body of the web page

8 8 HTML The Year 2000 The Millenium Approaches And You’re Invited! Please come to my Celebration of the New Millenium BBQ & Poetry Reading to be held on December 31 st at 7:00 p.m. Anyone reading this page is invited; send me mail using the link below for more details. Awad KHALIL © 1999, Awad KHALIL

9 9 W3C The World Wide Web Consortium (W3C) was started in 1994, according to their web site ( http://www.w3.org ), “to lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability”. http://www.w3.org W3C produces recommendations which describe the basic building blocks of the web. HTML recommendation is the most famous contribution of W3C to the web. In 1998, W3C released recommendations for XML 1.0, XSLT, and XPath.

10 10 W3C XHTML Validation Service Validating an XHTML document. (Courtesy of World Wide Web Consortium (W3C).)

11 11 W3C XHTML Validation Service XHTML validation results. (Courtesy of World Wide Web Consortium (W3C).)

12 Outline 12 Header.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Headers 11 12 13 14 15 Level 1 Header 16 Level 2 header 17 Level 3 header 18 Level 4 header 19 Level 5 header 20 Level 6 header 21 22 23 The font size of the text between tags decreases as the header level increases. Every XHTML document is required to have opening and closing html tags.

13 Outline 13 Program Output Select a header based on the amount of emphasis you would like to give that text.

14 Outline 14 Links.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Links 11 12 13 14 15 Here are my favorite sites 16 17 Click on a name to go to that page. 18 19 Deitel 20 21 Prentice Hall 22 23 Yahoo! 24 25 USA Today 26 27 28 Text between strong tags will appear bold. Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. Linking is accomplished in XHTML with the anchor (a) element. The anchor links to the page that’s value is given by the href attribute. The text between the a tags is the anchor for the link.

15 Outline 15 Program Output Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.

16 Outline 16 songs.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Links 11 12 13 14 15 Here are my favorite singers 16 17 Click on a name to hear a song !! 18 19 Om Kalthoum 20 21 Abdel Halim Hafez 22 23 Fayrouz 24 25 Kazem El Saher 26 27 28 Text between strong tags will appear bold. Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. Linking is accomplished in XHTML with the anchor (a) element. The anchor plays the song that’s value is given by the href attribute. The text between the a tags is the anchor for the link.

17 Outline 17 vidoenet.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Links 11 12 13 14 15 Here is your first lesson in networking 16 17 Just click to see the video !! 18 19 How to connect? 20 21 Here is your first lesson in Geography 22 23 Just click to see the video !! 24 25 Earth !! 26 27 28 Text between strong tags will appear bold. Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. Linking is accomplished in XHTML with the anchor (a) element. The anchor plays the video that’s value is given by the href attribute. The text between the a tags is the anchor for the link.

18 Outline 18 Contact.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Contact Page 11 12 13 14 15 16 My email address is 17 egyptone.com 18. Click the address and your browser will open an 19 email message and address it to me. 20 21 22 To create an email link include “mailto:” before the email address in the href attribute.

19 Outline 19 Program Output When a user clicks on an email link, an email message addressed to the value of the link will open up.

20 Outline 20 Picture.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Welcome 11 12 13 14 15 <img src = "xmlhtp.jpg" height = "238" width = "183" 16 alt = "XML How to Program book cover" /> 17 <img src = "jhtp.jpg" height = "238" width = "183" 18 alt = "Java How to Program book cover" /> 19 20 The value of the src attribute of the image element is the location of the image file. The height and width attributes of the image element give the height and width of the image. The value of the alt attribute gives a description of the image. This description is displayed if the image cannot be displayed.

21 Outline 21 Program Output The second image could not be displayed properly, so the value of its alt attribute is displayed instead.

22 Outline 22 Nav.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Navigation Bar 11 12 13 14 15 16 17 18 <img src = "buttons/links.jpg" width = "65" 19 height = "50" alt = "Links Page" /> 20 21 22 <img src = "buttons/list.jpg" width = "65" 23 height = "50" alt = "List Example Page" /> 24 25 26 <img src = "buttons/contact.jpg" width = "65" 27 height = "50" alt = "Contact Page" /> 28 29 30 <img src = "buttons/header.jpg" width = "65" 31 height = "50" alt = "Header Page" /> 32 33 34 <img src = "buttons/table.jpg" width = "65" 35 height = "50" alt = "Table Page" /> Placing an image element between anchor tags, creates an image that is an anchor for a link. A line break will render an empty line on a web page.

23 Outline 23 Nav.html Program Output 36 37 38 <img src = "buttons/form.jpg" width = "65" 39 height = "50" alt = "Feedback Form" /> 40 41 42 43 Using an image as an anchor works exactly the same as using text. Clicking on the image entitled “links” brings the user to the page on the right.

24 Outline 24 Contact2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Contact Page 11 12 13 14 15 16 17 18 My email address is 19 deitel@deitel.com 20. Click on the address and your browser will 21 automatically open an email message and address it to my 22 address. 23 24 25 26 All information on this site is © 27 Deitel & Associates, Inc. 2002. 28 29 30... tags, it can be set in subscript --> 31..., and it can be set into --> 32 --> 33 You may download 3.14 x 10 2 34 characters worth of information from this site. 35 Only one download per hour is permitted. The horizontal rule element renders a horizontal line on the web page. Special characters are denoted with an ampersand (&) and an abbreviation for that character. In this case, the special characters are ampersand and copyright.

25 Outline 25 Contact2.html Program Output 36 37 Note: < ¼ of the information 38 presented here is updated daily. 39 40 41 Text placed between del tags is struck out.. Text placed between the sup tags is superscripted. Text placed between the sub tags is subscripted.

26 Outline 26 Links2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Links 11 12 13 14 15 Here are my favorite sites 16 17 Click on a name to go to that page. 18 19 20 Deitel 21 22 Prentice Hall 23 24 25 Yahoo! 26 27 USA Today 28 29 30 31 The entries in an unordered list must be included between the and tags. An entry in the list must be placed between the and tags.

27 Outline 27 Program Output Each entry in the list is rendered on its own line with a bullet before it.

28 Outline 28 List.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Lists 11 12 13 14 15 The Best Features of the Internet 16 17 18 You can meet new people from countries around 19 the world. 20 You have access to new media as it becomes public: 21 22 23 24 tag --> 25 26 New games 27 New applications 28 29 30 31 For business 32 For pleasure 33 34 35 Entries for an ordered list must be placed between the and tags. By inserting a list as an entry in another list, lists can be nested.

29 Outline 29 List.html 36 Around the clock news 37 Search engines 38 Shopping 39 Programming 40 41 42 XML 43 Java 44 XHTML 45 Scripts 46 New languages 47 48 49 50 51 52 53 54 Links 55 Keeping in touch with old friends 56 It is the technology of the future! 57 58 59 60 My 3 Favorite CEOs 61 62 63 64 65 Harvey Deitel 66 Bill Gates 67 Michael Dell 68 The type attribute of the ordered list element allows you to select a sequence type to order the list. Text placed between the em tags will be italicized.

30 Outline 30 List.html Program Output 69 70 71 Some sequence types available to order lists are roman numerals, letters and numbers. Nested lists are indented underneath the main list.

Download ppt "1 HTML Basics Dr. Awad Khalil Computer Science Department AUC."

Similar presentations

4. Internet Programming ENG224 INFORMATION TECHNOLOGY – Part I

4. Internet Programming ENG224 INFORMATION TECHNOLOGY – Part I
Web Development & Design Foundations with XHTML

Web Development & Design Foundations with XHTML
HTML. The World Wide Web Protocols Addresses HTML.

HTML. The World Wide Web Protocols Addresses HTML.
HTML: HyperText Markup Language Hello World Welcome to the world!

HTML: HyperText Markup Language Hello World Welcome to the world!
Chapter 2 HTML Basics Key Concepts

Chapter 2 HTML Basics Key Concepts
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Background: HTML and CSS Chapters 1-4 of Deitel XML text.

Background: HTML and CSS Chapters 1-4 of Deitel XML text.
1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling 9.7Linking 9.8Images 9.9Formatting Text With 9.10Special.

1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling 9.7Linking 9.8Images 9.9Formatting Text With 9.10Special.
 2001 Deitel & Associates, Inc. All rights reserved. 1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling.

 2001 Deitel & Associates, Inc. All rights reserved. 1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling.
To. An easy way to explain the internet is to think of your school computers all linked together into a network that you can put information into.

To. An easy way to explain the internet is to think of your school computers all linked together into a network that you can put information into.
B118 Web Programming Session #3 Introduction to XHTML February 16, 2004.

B118 Web Programming Session #3 Introduction to XHTML February 16, 2004.
1 Introduction to XHTML: Part 2 Outline Introduction Basic XHTML Tables Intermediate XHTML Tables and Formatting Basic XHTML Forms More Complex XHTML Forms.

1 Introduction to XHTML: Part 2 Outline Introduction Basic XHTML Tables Intermediate XHTML Tables and Formatting Basic XHTML Forms More Complex XHTML Forms.
 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.

 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.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.

 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.
 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.

 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.
Developing a Basic Web Page with HTML

Developing a Basic Web Page with HTML
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved.

Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
 2008 Pearson Education, Inc. All rights reserved. 1 4 4 Introduction to XHTML.

 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters.

1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters.

Similar presentations

Ads by Google