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: Hello Empty tags – represent a single occurrence of an instruction.

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 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.

Example of an HTML Document Title of the document The content of the document......

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 is paired with closing tag

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: The attribute is size and the value is “5” The attribute is color and its value is “#FF0000”.

Some Common Tags...,... 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 - the paragraph tag is used to create a paragraph. The closing paragraph tag is required.

Some Common Tags.. Text formatting tags bold bold underline underline italic italic

Some Common Tags.. Alignment tags your text

Some Common Tags.. Ordered list (numbers) First row Second row Output 1. First row 2. Second row

Some Common Tags.. Unordered list (bullets) First row Second row Output  First row  Second row

References Chuan, Hu (2012). Introduction to HTML (Lecture Slides). en.wikipedia.org/wiki/HTML