HTML Basics - HTML, Text, Images, Tables, Forms

Section: tagTitle should be placed between and tags

Used to specify a title in the window titlebarSearch engines and people rely on titlesTelerik Academy Winter Season 2009/2010

*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*6## Text Authoring ToolsAny text editor can be used to create HTML documents.The most commonly used text editors are:Notepad (Windows)WordPad (Windows)Simpletext (Macintosh)WYSIWYG Authoring ToolsWhat You See is What You Get (WYSIWYG) authoring tools provide graphical user interfaces to simplify the creation of HTML documents.Examples of WYSIWYG authoring tools are:FrontPage by MicrosoftDreamweaver by MacromediaPageMill by AdobeNetscape ComposerStructure of an HTML DocumentAn HTML document is divided into two main sections:Heading - The HEADing contains information describing the document, such as its title. The heading section is indicated by the and tags.Body - The BODY section is where the Web document text, graphics, and other elements are placed. The body section is indicated by the and tags. Graphic FilesHTML supports two main graphic file formats:GIF - Graphics Interchange Format GIF files provide a maximum of 8-bit (256 colors), use indexed color, can be interlaced (image displayed in four passes), and support transparency and animation. GIF files should be used for images such as logos, cartoons, and icons.JPG Joint Photographic Expert Group JPG files provide a maximum of 24 bit color (true color), can handle grayscale images, allow you to control compression, and are progressive (a designer can specify the number of passes to use when displaying the image (like GIF interfacing). JPG files should be used for photographs and paintings.

Graphic FilesA newer format was introduced in 1995--PNG Portable Network Format.PNG is an open standard.Use has been restricted because of limited browser support. It is generally supported by version 4.0 browsers and above.Provides 48 bit color, a compression system, interlacing (7 passes), and support for 8-bit transparency

Multimedia File FormatsMultimedia files are used to provide audio and video.Audio and video may be supplied in two ways:StreamingNon-StreamingNon-streaming files must be downloaded in their entirety to the hard disk drive of the users machine before playing can begin.Streaming technology was developed to overcome the issue of download time.HTML Basics

First HTML Page

My First HTML Page This is some text...

test.html*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*11##

My First HTML Page This is some text...

First HTML Page: Tags12Opening tagClosing tagAn HTML element consists of an opening tag, a closing tag and the content inside.*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*12##

My First HTML Page This is some text...

First HTML Page: HeaderHTML header*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*13##

My First HTML Page This is some text...

First HTML Page: BodyHTML body*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*14##Some Simple TagsHyperlink Tags

Image Tags

Text formatting tagsLink to Telerik Web site

This text is emphasized.
new line
This one is more emphasized.*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*15##Some Simple Tags Example

Simple Tags Demo

This is a link.

Bold and italic text.

some-tags.html

*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*16##Headings and ParagraphsHeading Tags (h1 h6)

Paragraph Tags

Sections: div and spanThis is my first paragraphThis is my second paragraphHeading 1Sub heading 2Sub heading 3

This is a div*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*17##Headings and Paragraphs Example -

Headings and paragraphs Heading 1 Sub heading 2 Sub heading 3

This is my first paragraph This is my second paragraph

This is a div

headings.html

Plug-Ins and Multimedia ExtensionsBrowsers can be extended using additional software known as plug-ins. Plug-ins work as part of the browser.Plug-ins are available for audio and for displaying special effect images. Examples include:ShockwaveFlashRealPlayerQTVR (Quick Time)Plug-Ins and Multimedia ExtensionsRealPlayer by RealNetworksProvides live and on-demand streamed audio and video content on the web. It is widely used and is optimized for slow connections. RealPlayer can provide various audio qualities up to CD quality using ISDN and faster connections. Minimum support for reasonable quality is 28.8 Kbps.QuickTime Viewer from AppleSupports the viewing of graphics, audio, and video. NetScape Navigator 3+ and Internet Explorer 3+ are shipped with Quick viewer as part of the application. Quick time movies are popular because of their small file size.

Extensible Markup Language (XML)XML is the universal language for data formatting on the Web. The limited capabilities of HTML mean that many data types cannot be presented in a consistent and sophisticated manner, while XML can be customized by developers for any particular task such as:Financial dataScientific dataLegal informationVirtual Reality Modeling Language (VRML)VRML is used to create three dimensional objects with different colors and textures which can be placed in a virtual reality space through which the user can move.Like HTML, the VRML language is interpreted by the browser. VRML supports Java and JavaScript as well as sound and animation.The DeclarationHTML documents must start with a document type definition (DTD)It tells web browsers what type is the served codePossible versions: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5Example:

*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*23##HTML vs. XHTMLXHTML is more strict than HTMLTags and attribute names must be in lowercaseAll tags must be closed (
, ) while HTML allows
and and implies missing closing tags (par1 par2)XHTML allows only one root element (HTML allows more than one)XHTML vs. HTML Many element attributes are deprecated in XHTML, most are moved to CSS Attribute minimization is forbidden, e.g.

Note: Web browsers load XHTML faster than HTML and valid code faster than invalid!

Using ScriptsLive Demo

*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*26## Section: The element embeds formatting information (CSS styles) into an HTML page

p { font-size: 12pt; line-height: 12pt; } p:first-letter { font-size: 200%; } span { text-transform: uppercase; } Styles demo.
Test uppercase.

style-example.html*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*27##Comments: TagComments can exist anywhere between the tagsComments start with

Switch to English version
hyperlinks.htmlFill Our Form
Parent
Catalog
BASD
Please report bugs here (by e-mail only)