BCA_Sem-2_Web Designing_Unit-2

IDOL Institute of Distance and Online Learning ENHANCE YOUR QUALIFICATION, ADVANCE YOUR CAREER.

2 Unit 1: HTML • Mark up Tags • Heading-Paragraphs • and Line Breaks HTML Tags. www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Mark up Tags 3 HTML Identifies the file as containing HTML-coded information and is used in association with the file extension .html (.htm where the extension length is restricted). HEAD Identifies the first part of the document containing the title. The title is shown as part of your browser's window (see below). TITLE The title element contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used to identify your page for search engines. It is good practice to restrict titles to 64 characters. www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Mark up Tags 4 BODY The body is the main section of the HTML document following after the heading, and contains the publishable content of the document. Background Color By default text is displayed in black on a gray background, but these settings can be changed. The color of text, links, visited links, and active links can be chbanged using the following attributes: BACKGROUNDIdentify the image to use as a background to the document on screen. Any image can be used as the background image. The browser will tile the image, repeating it across and down to fill the browser window automatically. Usage: BACKGROUND=\"image_filename\" BGCOLOUR Set the background colour for the document (see colours). TEXTSet the foreground colour used to display text. LINK Set the colour used to highlight unused hyperlinks. www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Mark up Tags 5 Headings HTML has six levels of headings, starting with '1' for the most significant and working down to '6'. The associated text is highlighted by the Browser to stand out against the normal body text. The syntax of the heading element is: <Hn>Heading Text</Hn> where n specifies the heading level (1-6). Heading levels should not be skipped as the results may be unpredictable Paragraphs When HTML documents are rendered for presentation, carriage returns are ignored and the text that they separate continues as if a single space is present. In addition, contiguous whitespace (spaces, linefeeds, and carriage returns) is compressed into a single space when the document is displayed. It is always the tags that dictate the layout of the document and not the text itself. The browser will determine where best to wrap text to make best use of the space available on the screen (or printed page). Paragraph tags are used to identify hard breaks in the text - where the next paragraph should start on a new line. They are coded as: <P> Paragraph text </P> www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Mark up Tags 6 Horizontal Lines (Rules) The <HR> tag produces a horizontal line the width of the visible screen. The following attributes are available: SIZE Specify the thickness of the line (in pixels) WIDTH Specify the proportion of the width to be taken up by the line. For example: <HR SIZE=4 WIDTH=\"50%\"> is presented as: www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

HTML Headings 7 HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

HTML Headings 8 Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

HTML Headings 9 Bigger Headings Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property: www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

HTML Paragraphs 10 HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph. 1.<p>This is first paragraph.</p> 2.<p>This is second paragraph.</p> 3.<p>This is third paragraph.</p> www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Space inside HTML 11 Paragraph If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one. www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Example 12 <!DOCTYPE html> <html> <body> <p>A Computer Science portal for geeks.</p> <p> It contains well written, well thought articles. </p> </body> </html> www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Line Breaks HTML Tags 13 The <br> tag inserts a single line break. The <br> tag is useful for writing addresses or poems. The <br> tag is an empty tag which means that it has no end tag. www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Example 14 www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Line Breaks HTML Tags 15 The line break tag can be placed within other HTML elements such as paragraphs, tables, lists, and headings. Use the line break tag to solve minor formatting issues, save larger page layout issues for tables and the align attribute. Remember that the line break tag does not require a closing tag. www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Points to Remember 16 So basically when you use this <br/> tag, the content following it starts from the next line. This tag doesn’t need any opening or closing of the tags because there is nothing to be in between them. This <br/> tag represents a line break in an HTML document. Similarly <br/> tag is very helpful for writing poems and addresses. This <br/> tag is used to insert the line break or the carriage-return within the parent element such as the paragraph without breaking out from the parent element. Unlike <p> tag defines the paragraph, an empty element is not added before this line. The <br/> tag main purpose is to use to give the line break in an HTML document. This <br/> element is classified as a “void element” because it has no content. This also means that there is no end tag for this one. After using this tag the sentence will be on the next different line. It’s little similar to the <p> tag. www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Exercise 17 www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

Textbooks / Reference Books 18 TEXT BOOKS T1 John Ducket, HTML & CSS: Design and Build Web Sites. T2 Mark Pilgrim, HTML5: Up and Running. T3 David Flanagan, Javascript: The Definitive Guide, Oreilly Media. T4 Joel Sklar, Principle of Web Design, Cengage Learning. REFERENCE BOOKS R1 Bill Kennedy and Chuck Musciano, HTML & XHTML: The Definitive Guide. R2 Jon Duckett, Beginning HTML, XHTML, CSS and Javascript, Wiley India. www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL

19 THANK YOU www.cuidol.in Unit-1(MAP-607) All right are reserved with CU-IDOL