HYPERTEXT MARKUP LANGUAGE (HTML) Vijaya K Pandey.

HYPERTEXT MARKUP LANGUAGE (HTML)

Vijaya K Pandey

HyperText Markup Language(HTML)

HTML is used to create web documents including text, images, formatting, and hyperlinks to other documents.

HTML documents consists of text and ‘markup’ tags which are used to define the structure, appearance, and function of the information.

There are two types of markup tags:• Container tags – Define a section of text using a start

tag and an end tag. For example, text placed inside of these tags would appear in bold:

<B>Hello</B>• Empty tags – represent a single occurrence of an

instruction. <BR>

Text Authoring Tools

Any text editor can be used to create HTML documents.

The most commonly used text editors are:

• Notepad (Windows)• WordPad (Windows)• Simpletext (Macintosh)

WYSIWYG Authoring Tools What 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 Microsoft• Dreamweaver by Macromedia• PageMill by Adobe

Structure of an HTML Document

An 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 <HEAD> and </HEAD> tags.

• Body - The BODY section is where the Web document text, graphics, and other elements are placed. The body section is indicated by the <BODY> and </BODY> tags.

Example of an HTML Document<!DOCTYPE html><html><head><title>Title of the document</title></head>

<body>The content of the document......</body></html>

Graphic Files• HTML supports two main graphic file formats:

— GIF - Graphics Interchange Format (pronounced GIF/JIF)—GIF files should be used for images such as logos,

cartoons, and icons.— JPG – Joint Photographic Expert Group (A jpg encoded

graphics file - pronounced JAY-PEG)—JPG files should be used for photographs and paintings.

It also supports:— Portable Network Graphics (PNG)

—PNG is an open standard.—is a raster graphics file format that supports lossless data

compression

Multimedia File Formats Multimedia files are used to provide audio and

video. Audio and video may be supplied in two ways:

• Streaming• Non-Streaming

Non-streaming files must be downloaded in their entirety to the hard disk drive of the user’s machine before playing can begin.

Streaming technology was developed to overcome the issue of download time.

Multimedia File Formats AVI – Audio-Video Interleaved (A standard format for

computers)

MOV – QuickTime Video (Format developed by Apple Computer that displays video, audio, and animation on Mac and Windows)

MIDI – Musical Instrument Digital Interface (Audio format used for synthesized music rather than recordings. Files are smaller than WAV files

MPG/MP3 – MPEG (Moving Picture Experts Group) – High quality compressed format for audio and video

WAV – Used for high quality recordings for both mono and stereo audio tracks. Creates relatively large files.

HTML Tags HTML –tags are enclosed in < > symbols

and usually come in pairs.

Examples: Opening tag <html> is paired with closing tag

</html>

Opening tag <b> is paired with closing tag </b>

Attributes & Values Some tags have attributes that can be set

Values for the attributes are enclosed by double quotes

Here are two examples of attributes that can be set with the font tag: <font size=“5”>

• The attribute is size and the value is “5”

<font color=“#FF0000”>• The attribute is color and its value is “#FF0000”.

Some Common Tags <h1> <h2>...<h6> ,

</h1> </h2>... </h6>

the header numbers are used to denote levels in a document (similar to headers found in word processors).

h1 uses a very large font for the text h2 is large, but not as large as h1 h3 is smaller than h2, and so on

<p> </p> - the paragraph tag is used to create a paragraph. The closing paragraph tag is required.

Some Common Tags.. Text formatting tags

<B>bold</B> bold

<U>underline</U> underline

<I>italic</I> italic

Some Common Tags.. Alignment tags

<P ALIGN=Left>your text </p>

your text

<P ALIGN=Center>your text </p>

your text

<P ALIGN=Right>your text </p>

your text

Some Common Tags.. Ordered list (numbers)

<OL>

<LI>First row

<LI>Second row

</OL>

Output

1. First row

2. Second row

Some Common Tags.. Unordered list (bullets)

<UL>

<LI>First row

<LI>Second row

</UL>

Output

First row

Second row

References Chuan, Hu (2012). Introduction to

HTML (Lecture Slides). http://www.w3schools.com/html/ en.wikipedia.org/wiki/HTML http://ericae.net/learn-html.html

HYPERTEXT MARKUP LANGUAGE (HTML) Vijaya K Pandey.

Documents

Transcript of HYPERTEXT MARKUP LANGUAGE (HTML) Vijaya K Pandey.