Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML - An Introduction © 2012 D. J. Foreman.

Published byFloriane Marchand Modified over 5 years ago

Similar presentations

Presentation on theme: "HTML - An Introduction © 2012 D. J. Foreman."— Presentation transcript:

1 HTML - An Introduction © D. J. Foreman

2 Purpose of HTML To structure text and multimedia documents
To provide links to other documents To create web pages To provide uniformity in web pages © D. J. Foreman

3 Language Structure Tag based – 3 types
Paired tags Unpaired tags Special tags Unsupported or unknown tags are ignored Spelling counts! © D. J. Foreman

4 Formatting, Layout, Organization - 1
Formatting: visual appearance Style bold, italic Color (now use CSS) Font (now use CSS) Organization Paragraphs Lists Tables Forms Headings © D. J. Foreman

5 Formatting, Layout, Organization - 2
Browser does the formatting, layout and organization (ignores any formatting or layout you may have in your text) Tags specify the actions Whitespace is ignored unless inside quotes Data entry is NOT wysiwyg © D. J. Foreman

6 Deprecated Tags Still work, but future is limited DON’T USE THEM
<applet> <basefont> <center> <dir> <font> <menu> <s> <strike> <u> © D. J. Foreman

7 Tag Structure < tagname attributes > Attributes (or options):
attribute_name = "value" Can be in any order, for example: <table border='5' rules=‘cols'> Or <table rules='cols' border='5' > Note the quotes REQUIRED for correctness © D. J. Foreman

8 Paired Tags Require the < and > symbols Specific spelling
Ending tag requires a / example: <body> </body> © D. J. Foreman

9 Unpaired Tags No ending tag Apply to a single object Examples:
<hr> <img> XHTML rules require them to be “self-ending” e.g.; <hr /> note the space before the / © D. J. Foreman

10 Special Tags Represent specific ASCII symbols, like: µ  micro
® ® registered   non-breaking space (a “required blank” in the text) NOTES: Very old browsers don't know names of some special tags, but their numbers are always OK. © D. J. Foreman

11 Tag Uses Page identification, manipulation and style <html>
<head> <title> <meta> <style> <script> © D. J. Foreman

12 Basic Web Page Structure
Identification area tags Body Text to be formatted Tags and styles to do the formatting Paragraph Block structure May NOT contain other blocks Must have </p> for "HTML strict" compliance © D. J. Foreman

13 Basic Web Page Structure -2
Method to 'connect' pages URLs – Universal Resource Locators (or Uniform Resource Locators) e.g.: Tags can create connections <a> (for anything 'clickable') <img> (for inline images) <embed> (for inline sounds) <object> (for inline video) © D. J. Foreman

14 Example <html> <head> <!-- This is an html comment --> <title> my first webpage</title> </head> <body> <p> <i>My web page text </i> </p> </body> </html> © D. J. Foreman

15 Beginning tags <body> all options are deprecated Old options:
Alink: activated during this session Vlink: previously visited links Link: unvisited links © D. J. Foreman

16 Background Color Formerly specified in <body> tag
Now done via CSS Color name or 'rgb' triple in hexadecimal: "#D0C580" each pair of digits is a base 16 number 1st pair is for red 2nd pair for green 3rd pair for blue © D. J. Foreman

17 Base 16 numbering 8 bits per byte Each bit is a power of 2 higher
Counting RIGHT TO LEFT, we have: 128, 64, 32, 16, 8, 4, 2, 1 as the decimal values for the bit positions. So is = 33 (decimal) © D. J. Foreman

18 Base 16 numbering - 2 But remembering all those bits is hard
We have a shorthand: hexadecimal In decimal, we number our columns: 1, 10, 100 In hexadecimal we number: 1, 16, 256 So in one column, we can count to 15 (one less than our number system's base) But we don't have symbols for 10-15 © D. J. Foreman

19 Base 16 numbering -3 So we "invent" new symbols:
10, 11, 12, 13, 14, 15 A, B, C, D, E, F So a number like: BF16 Is really B * 16 = 11*16 = F * 1 = 15* 1 = © D. J. Foreman

20 Creating a Webpage - First Steps
Open NOTEPAD Type the text Save with an extension of htm or html On your H: drive In your public_html folder Open browser Click on: File/Open Enter: bingweb.binghamton.edu/~yourid Might need ftp to put file on other servers © D. J. Foreman

21 Spelling: MyPage is not the same as mypage 403 Forbidden
Common Errors Spelling: MyPage is not the same as mypage 403 Forbidden URL was correct & file exists, BUT file not available to the public Action – change permissions for file chmod 755 filename on UNIX systems See link on Prof. Foreman's homepage: "solving webpage access problems" 404 – cannot locate the page URL is incorrect, or not available, or misspelled. Action – fix the URL in your HTML © D. J. Foreman

22 Web Server Error Messages
415 SERVICE_UNAVAILABLE 500 INTERNAL_SERVER_ERROR 501 NOT_IMPLEMENTED 502 BAD_GATEWAY 503 SERVICE_UNAVAILABLE 506 VARIANT_ALSO_VARIES 400 BAD_REQUEST 401 UNAUTHORIZED 403 FORBIDDEN 404 NOT_FOUND 405 METHOD_NOT_ALLOWED 408 REQUEST_TIME_OUT 410 GONE 411 LENGTH_REQUIRED 412 PRECONDITION_FAILED 413 REQUEST_ENTITY_TOO_LARGE 414 REQUEST_URI_TOO_LARGE © D. J. Foreman

23 More about basic tags <body> <font> (deprecated – use CSS
attributes: bgcolor, background <font> (deprecated – use CSS attributes: size, color, typeface <p> headings: <h1> … <h6> <em> <strong> <sub> <sup> <u> <b> <i> © D. J. Foreman

24 The Anchor Tag points to another page on this server or to a page on a different server <a href="…"> click here </a> point to an image somewhere <a href="XYZ.JPG"> click me </a> connect via a "click-able" in-line image <a href="…"> <img src="..."> </a> © D. J. Foreman

25 Using anchors within a page
<a name="my_mark1"> </a> known as a named anchor <a href="#my_mark1"> go back</a> Re-displays page with my_mark1 at top of screen © D. J. Foreman

26 The <img> Tag Allows an image to be in-line with the text (no click required to see image) This is the body of my text with more text afterward. Example: .. my text <img src="afile.jpg"> with more text afterward. © D. J. Foreman

27 <IMG align=…> left/right page alignment of image
top, texttop, middle, etc align image to the text alt= what to show if no graphics "align=top" gives: text © D. J. Foreman

28 Ordered Lists <ol> </ol>
<li> list item <li> another <li> yet another </ol> A list item may contain any other tags There is NO list-item end tag © D. J. Foreman

29 Nested Ordered Lists <ol> ordered list 1 </ol>
<li> list item <li> <ol> <li> item1 <li>item2</ol> <li> yet another </ol> Note: You do not do the formatting (such as indenting). The browser will do it. © D. J. Foreman

30 Unordered Lists <ul> </ul> <li> list item
<li> another <li> yet another </ul> © D. J. Foreman

31 Nested Unordered Lists
<ul> <li> list item <li> <ul> <li> another <li> yet another </ul> © D. J. Foreman

32 Mixed Nested Lists <ul> </ul>
<li>unordered list item <li> <ol> <li> ordered list item <li> another <li> yet another </ol> <li>yet another </ul> © D. J. Foreman

33 Dictionary (glossary) Lists
<dl> <dt>dog <dd>a 4 legged animal that barks <dt>cat <dd>a 4 legged animal that meows <dt> person <dd> a 2 legged animal that whines </dl> © D. J. Foreman

34 Standards HTML 4.0 – many formatting elements (like "align", <center>) are "deprecated" HTML should be for text organization CSS for element formatting & layout XML – identifies CONTENT XML tags like: <street_address> <check_number> HTML was re-defined using XML giving XHTML (uses same tags) © D. J. Foreman

35 HTML and XHTML Levels Transitional – allows deprecated tags
but all tags must have endings Frameset - as above + frames Strict – no deprecated tags OR frames use CSS with layers to get the same effects © D. J. Foreman

36 Document Type Definitions
DTD statements allow you to specify: HTML vs XHTML Support-level Transitional Frameset Strict URL of the DTD rules © D. J. Foreman

37 Doctype Syntax for all HTML types
Identifies rules for handling the document <!DOCTYPE html -ruletype rule_loc> NOTE: ruletype preceded by a "-" rule_loc specifies the URL for the "document type definition" file © D. J. Foreman

38 For HTML Documents HTML transitional (or loose): HTML frameset:
<!DOCTYPE HTML PUBLIC "  //W3C//DTD HTML 4.01 Transitional//EN" " HTML frameset: <!DOCTYPE HTML PUBLIC "  //W3C//DTD HTML 4.01 Frameset//EN" " HTML strict: <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" " © D. J. Foreman

39 For XHTML Documents XHTML transitional: XHTML frameset: XHTML strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " XHTML frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " XHTML strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " © D. J. Foreman

40 Unpaired Tags in Xhtml All tags have endings
Examples (with formal XHTML endings): <hr> <hr /> <img> <img /> <p> <p /> Note the space before the "/" More info at © D. J. Foreman

Download ppt "HTML - An Introduction © 2012 D. J. Foreman."

Similar presentations

Introduction to HTML. A Web Page is.. An ASCII (text) file.. Whose filename ends with.htm or.html –index.html or cookie-recipe.htm Contains HTML tags.

Introduction to HTML. A Web Page is.. An ASCII (text) file.. Whose filename ends with.htm or.html –index.html or cookie-recipe.htm Contains HTML tags.
HTML popo.

HTML popo.
XHTML Week Two Web Design. 2 What is XHTML? XHTML is the current standard for HTML Newest generation of HTML (post-HTML 4) but has many new features which.

XHTML Week Two Web Design. 2 What is XHTML? XHTML is the current standard for HTML Newest generation of HTML (post-HTML 4) but has many new features which.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.

CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Creating Pages in XHTML

Creating Pages in XHTML
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.
1. Content – Collective term for all text, images, videos, etc. that you want to deliver to your audience. 2. Structure – How the content is placed on.

1. Content – Collective term for all text, images, videos, etc. that you want to deliver to your audience. 2. Structure – How the content is placed on.
XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.

XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.
XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.

XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.
More HTML Chapter 4. 2 Nesting Tags How do you write the following in HTML? The wrong way: This is really, REALLY fun ! Tags must be correctly nested.

More HTML Chapter 4. 2 Nesting Tags How do you write the following in HTML? The wrong way: This is really, REALLY fun ! Tags must be correctly nested.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation

HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –

HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
CS105 Introduction to Computer Concepts HTML

CS105 Introduction to Computer Concepts HTML
Understanding HTML Code

Understanding HTML Code
HTML-1© 2004 D. J. Foreman HTML - An Introduction.

HTML-1© 2004 D. J. Foreman HTML - An Introduction.
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.

Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
 2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages.

 2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages.
Objectives: 1. Create a Skeleton HTML 2. View a Skeleton File Through a Server and Browser 3. Learn HTML Body Tags for the Display of Text and Graphics.

Objectives: 1. Create a Skeleton HTML 2. View a Skeleton File Through a Server and Browser 3. Learn HTML Body Tags for the Display of Text and Graphics.
XHTML1-1 Extensible HyperText Markup Language (XHTML) Xingquan (Hill) Zhu

XHTML1-1 Extensible HyperText Markup Language (XHTML) Xingquan (Hill) Zhu
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.

Similar presentations

Ads by Google