Scribd
Upload
12 views22 pages

Unit-II - Web Technology

This document provides an introduction to HTML, covering its structure, elements, and various tags used for formatting web pages. It explains key concepts such as HTML tags, headers, paragraphs, lists, and how to add graphics and links. Additionally, it includes examples and exercises to reinforce understanding of HTML basics.

Uploaded by

shakyajagriti60
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
12 views22 pages

Unit-II - Web Technology

This document provides an introduction to HTML, covering its structure, elements, and various tags used for formatting web pages. It explains key concepts such as HTML tags, headers, paragraphs, lists, and how to add graphics and links. Additionally, it includes examples and exercises to reinforce understanding of HTML basics.

Uploaded by

shakyajagriti60
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 22
UNIT- 2: Introduction to HTML UNIT STRUCTURE 2.0 Obje 2.1 HTML 2.2 HTML tags 2.3 Commonly used HTML commands 2.4 Title and footers Text format 2.6 Text Style 2.7 Lists 2.8 Adding Graphics to HTML documents 2.9 Tables 2.10 Linking Documents 2.11 Frames 12 Summary 13 Questions for Exercise 14 Suggested Readings 2.0 Objective HTML, an acronym for Hyper Text Markup Language, specifies how the structure of'a webpage will be with the help of various markups. The following unit explains the core concepts of HITML such as its structure, elements, attributes and core events. It also sheds light on block- level elements and text-level elements. With the help of this unit, the reader will be able to understand the basic elements used in HTML and their usage in the formatting of a webpage. 2.1 HTML HTML, an acronym for Hyper Text Markup Language, specifies how the structure of a webpage will be with the help of various markups. It is a structured markup language that is used to create Web pages. Markup languages like HTML bundle together codes whici are elements that are used (o represent the structure and format of a document. A user agent, usually a Web browser which renders (delivers) the document, interprets the meaning of these codes to decipher (making it into simpler human readable text) how to structure or display a document, The HTML elements are made up of alphanumeric tokens surrounded by angle brackets, for example, , , and
Almost all elements possess a pair of tags i.e. a start tag and an end tag, The start tag is a mnemonic symbol for the clement enclosed in ‘<* ">", also known as angle brackets, for instance, the symbol associated with bolding text is B and the start tag for this purpose is . ‘An end tag is the same as that for a start tag, but with an exception that there exists a forward slash preceding the text symbol of start tag: , The instruction applied by an element modifies whatever content is present between the starting and ending tags: This is an example of « simple HTML document Example: shead> Page Title=/title> </head> <body> <hl>lt is the First Heading hl > ‘<p>ltis the first paragraph.</p> </body> </ul> Output It is the First Heading Tris the first paragraph 2.2 HTML tags Since HTML is a markup language, therefore, it uses certain tags for formatting the content. The tags are used with angle braces as in <Tag Name>. Leaving few tags, most tags require to be supplemented with closing tags</Tag Name>, As for example, the closing tg of himl> is </html> and the closing tag of <body> is <body>. HTML document uses the following tags provided in Table 2.1 Tags Description Te represents the document type and HTML version. shiml> The HTML document itself begins with shunl> and ends with <(him> <head> This tag defines the header of document and it can keep other HTML tags like <title> title= ‘The title tag is used inside the <head> tag to represent document title <body> It represents the document's body which keeps other HTML tags like <h1> hls It defines the heading ea This tag represents a paragraph ‘Table 2.1 HTML Tags 2.2.1 The <!DOCTYPE> Declaration The <!DOCTYPE> declaration tag is implemented to detect the HTML version used in the document, The contemporary HTML version is 5 which uses the following declaration: IDOCTYPE html> There are several declaration types which are used in HTML documents on the basis of HTML version being used. More details will be observed on this during elaboration of <!DOCTYPE...> tag and the remaining HTML tags. 2.2.2 Heading Tags HTML documents begin using « heading, Different sizes can be applied for using headings. HTML features mainly six heading levels using the elements <h1>, <h2>, <h3>, <h3>, <h5>, and <h6>. The web browser inserts one line before and after a heading for fulfilling the purpose of displaying it. Here is an illustrated example. Example: <!DOCTYPE html> <himl> <head> <title> Example of a Headingtitle> <head> <body> hi> Example of heading </I> ‘<h2> Example of heading 2</h2> <h3> Example of heading 3/h3> <h4> Example of heading 4</h4> <h5> Example of heading 5</hS> <h6> Example of heading 6</ho> </body> </html> Output: Sample of Heading 1 Sample of Heading 2 Sample of Heading 3 Sample of Heading 4 Sample of Heading $ Sample wt Hesdings 2.3 Commonly used HTML Commands 2.3.1 HEADERS: In HTML, up to six levels of headers are used in any documents, hl to h6, Header | (h1) is the largest header and they get successively smaller through header 6 (h6). Below is an example of <hl> header and how it usually appears in a relation. For rest of the headers we can refer to section 2.2.2 af this book. Here is an example of a <hI> tag Example: <hi>Example of a header | tag<jhI> Output: EXAMPLE OF A HEADER 1 TAG 2.3.2 PARAGRAPHS The <p> tag provides a means to structure our text into different paragraphs, Each paragraph should write in between an opening <p> and a closing </p> tag as shown below in the example, Example: p> it breaks the current line with a trailing blank line <br>it breaks the current line with no trailing blank line For our and others convenience, it is better to put few blank lines between paragraphs to edit in future or on demand, 2.3.3 PREFORMATTED TEXT The preformatted text tay <pre> used to display the same text in our document as it is written in HTML seript, The font-width, their spaces, lines and tabs of our source document remain as is it, In simple words, the browser shows our test as we typed it in. Through monospace font, the text is rendered where the same amount of space is occupied by all characters, Visually, preformatted text looks like 3 courier font. This is an example of preformatted tag. Example: <pre>this is a preformatted text tag example<ipre> Output this isa preformotted text tag exomple 2.3.4 BOLDFACE, UNDERLINE AND ITALICS We can use bold, italic and underline <b>, <i> and <u> tags respectively in HTML editor to highlight the text ina HTML document, The text in-between <b>~</b> tags text will be bold and similarly we can apply other to italic and underline. The HTML links do not require extra tag because these are already underlined. ‘The potential for confusion and the archaic nature of underlining in general make it a poor marker for emphasis. When using these tags. we usually cannot (and probably should not) have text that is both boldface and italics: the last tag encountered is usually the tag that is displayed. For example, if we had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics. This is an example. Exampl <b>boldfaceb> <u> underline/u> <iitaliesi> Output: boldface underline italie 2.3.5 LISTS In HTML, we can give number, unnumbered and lists to the different text using the simple tags. We can also use nested lists with a list. HTML editor automatically takes the space between the bullet oF list number in a text, we do not need to mention it. Neither (as yet) do we have control over what type of bullet will be used as each browser is different. Unnumbered lists: <ul> tag is use to unnumbered any list followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>. For example, here is an unnumbered list with three items: Example disc bullets: <IDOCTYPE bimi> <himl> <body> <h2>Dise bullet with Unordered list <h2> <ul style="list-style-typerdise"> <lieRam</li> Shyams/li> <li>Mahesh<i> sul </body> </html> Output dis + Ram * Shyam © Mahesh This is an example of a circle bullet. Example circte bullets: <!DOCTYPE html> <html> <body> ‘<h2>Cirele bullets with Unordered list </h2> <ul style="list-style-type:circle"> <li>Rame/li> <li>Shyam</li> <li>Mahesh</i> <ul> <body> shtmt> Output © Ram Shyam Mahesh This is an example of a square bullet. Example square bullet: S!DOCTYPE htuml> <html> <body> <<h2> Square Bullets with Unordered list </h2> <ul siyle—"list-style <li>Ram</li> shyams/li> <li>Mahesh<ili> <A> </body> shtml rypessquare"> yutput + Ram Shyam «Mahesh. Numbered lists Similar example given here using a nunibered list format; Example Numbers: <IDOCTYPE biml> <html> <body> Sh2>Numbers are used for Ordered List</h2> <ol type="I"> <li>Ram</i> <li>Shyam</li> <li>Mahesh<li> <ol> </body> </html> Output: 1 Ram 2. Shyam 3. Mahesh This is an example of an upperease letter use in list, Example Uppercase Letter: =IDOCTYPE bimi> bimnl> <body> <h2>Letters are used for Ordered List </n2> <ol type="A"> <li-Ram</li> <li>Shyam</li> <li>Mahesh<Jli> </ol> <Jbody> </tont> Output: A. Ram B. Shyam C. Mahesh This is an example of @ lowercase letter use in list, Example Lowercase Letter: <!DOCTYPE html> shiml> <body> <<h2> Lowerease Letters are used for Ordered List </n2> <ol type="a"> sli-Ram</li> <li>Shyam</li> <li>Mahesh<ili> <lol> </body> </html> Outpu a. Ram b, Shyam ¢._ Mahesh. This is an example of roman letters. le Roman letters: <!DOCTYPE htmi> <himl> <body> <h2> Roman Numbers are used for Ordered List </h2> <ol type="T"> <li>Ram</li> <li>Shyam</li> <li>Mahesh</li> slol> </body> </html> Output Ram I. Shyam I Mahesh 2.3.6 BLOCKQUOTE For a long quotation in the text, we can use a < blockquote > tag and the text enclosed within this tag indicates an extended quotation. Blockquote texts are generally rendered by the browser as indented text, It looks like this: <blockquote>...<fblockquote> 2.3.7 HORIZONTAL LINE We can insert a horizontal rule tag <hr> to separate a paragraph into different sections, A horizontal rule-line is displayed as shown below. This is an example of a horizontal line This is an example of 2 horizontal line 2.4 Title and footers Title definition and Usage The <title> is an important tag which required to shown the title of the HTML documents and it only contains text and other tags containing in the title are ignored. The title is displayed in the browser's toolbar. It also shows the favorite pages title which we added during browsing and in search-engine results title. This is an illustrative example of title tag Example: <!DOCTYPE btmi> <biml> <head> stitle> First HTML s sshead> <body> pt for web page First HTML script for web page Jere Fast TN ep fa oe seittarwed = | Footer definition and Usage The elements in one document, This is an example of a footer. Example: S!DOCTYPE html>