A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension

Size: px

Start display at page:

Download "A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension"

Vanessa Powell
5 years ago
Views:

1 HTML Website is a collection of web pages on a particular topic, or of a organization, individual, etc. It is stored on a computer on Internet called Web Server, WWW stands for World Wide Web, also called the Web, is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and accessible via the Internet. The World Wide Web was originally designed in 1991 by Tim Berners-Lee at CERN. HTML stands for Hyper Text Markup Language. It is the basic markup language for creating web pages and websites. A HTML web page contains markups or tags that defines how to display information on the browser s window. Tag - A tag in HTML document is a html element surrounded by angular brackets which has a specific meaning and task in HTML. <html>, <body>, <head>, <h1>, <br>, etc. Structure of HTML document: <html> <head> --contains meta data about the web page -- </head> <body> -- Contains information that is to be displayed -- </body> </html> A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension <html> tag : The <html> tag represents the root of an HTML document. It is the starting tag of web page. It is the container for all other HTML elements, which are enclosed in <html> </html> <head> tag: The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more. <title>, <style>, <base>, <link>, <meta>, <script>, <noscript> <body> tag: The <body> tag defines the document's body. This is the section which is displayed on the web page. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. which are enclosed in <body> </body>.

2 <title> tag: It defines the title for the web page. It is written in Head section. The title will be displayed on the browser window s title bar. Formatting Tags Physical Style tags <b>... </b> - To display text in bold. <i>... </i> - Displays text in italics <u> </u> - To underline the text. <tt>... </tt> Displays text in mono spaced font style <br> - stands for break rule. It is used to start a new line. It has no closing tag. <strong>... </strong> Displays text bold style. <em>... </em> Defines emphasized text.(browsers displays in italics style). <mark>... </mark> Displays marked or highlighted text <del>... </del> Displays deleted or removed text. <s>... </s> Displays text with strike through. <ins>... </ins> Defines inserted(added) text. <sub>... </sub> Defines subscripted text. <sup>... </sup> Defines superscripted text. <center>.. </center> - To display the text horizontally at the center of the screen <small>... </small> Reduces the font size of text by 1 unit. <big>... </big> Increases the font size of text by 1 unit. <blockquote>... </blockquote> Defines a quoted section. <font>... </font> Changes the font of the text. Attributes of <font> tag: Face specifies the name of the font Size specifies the size of the letters values: 1 to 7 Color specifies the color name or color code <font face= Arial Black size=5 color=blue> Good Morning </font> <p> tag: It is used to indicate a paragraph in a web page. It is a block level html element. It has the following attributes: a) Align - to specify alignment left, center, right b) Style - to specify css style commands. c) Width - to specify horizontal dimension of the paragraph in pixels. <p align=center width=200>....paragraph.. </p> <p style="color:blue;">.. paragraph. </p>

3 Heading tags (H1 to H6) The Heading tags are used to define HTML headings. There are six levels of headings. <h1> defines the most important heading. <h6> defines the least important heading. Attribute of Heading tag: Align specifies the alignment for the heading values: left, center, right The heading tags and <p> tag are block level HTML elements which means they begin with a new line. <body> tag Attributes of <body> tag: background contains the source URL of image file to be displayed in the background. bgcolor specifies the color name or color code for the background color of the web page. text specifies the color for the text in the web page. link specifies the color for the links in the web page. alink - specifies the color of an active link in the web page. vlink - specifies the color of an visited link in the web page. Example: <body bgcolor=cyan link=green vlink=red> <body background="images/plotters3.jpg"> Comments in HTML In HTML to write comments the following tag is used:  An HTML comment begins with . HTML comments are visible to anyone that views the page source code, but are not rendered by a browser. They are not shown on the window.  Short Questions : 1) List the advantages and disadvantages of HTML 2) Explain basic tags used in HTML in brief. 3) List any 4 physical style tags and state uses of each. 4) Explain the <body> tag and its attributes. 5) Give the use of following tags : (any tags from notes will come) 6) Explain <font> tag. 7) Explain <p> tag. 8) Write HTML code for the following : (code given in class) Create a web page having two headings and a paragraph with different font and colors.

4 Q.9 List the different types of Lists that can be created in HTML. Ans. In HTML we can create 3 types of list a) Unordered List - <UL> and <LI> b) Ordered List - <OL> and <LI> c) Definition List - <DL>, <DT> and <DD> Q.10) Explain the tags and attributes of Ordered list and Unordered list Ans. <UL> tag is used to create list displayed as a series of bullet points. <LI> tag is used for each element in the list. Attributes: Type - Specifies the bullet type Square, Disc, Circle <OL> tag is used to create a list displayed with number format. Attributes : Type - specifies the numbering scheme to use. Type=1, Type=a, Type=i Start - specifies the initial value or the starting value of list items. Q.11) Explain Definition Lists. Ans. Definition list are used to display definitions of terms. It is created by using <DL>, <DT> and <DD> tags. Q12) Explain Tables in HTML. Ans. A table is made up of rows and columns. Intersection of row and column makes a cell. Tables are created using the following tags in HTML:- <table> - specifies the beginning of table <caption> - used to specify description of the table. <TR> - To create a row <TD> - To create table column data cell <TH> - To create Table column header cells Q13) List the different attributes of <table> tag and give use of them. Ans. On Page No. 183 Q14) List the attributes that can be used with <TR>, <TH> and <TD> tags. Ans. On Page No. 184

5 Q15) What are Hyperlinks? How to create hyperlinks? Ans. Hyperlinks also called anchors marks text or images as elements that points to other HTML documents, images, videos, special places within web page. Hyperlinks are created using anchor tag. <a> <a href= NASA </a> Attributes of <a> tag: href - specifies the URL of the resource to be pointed target - specifies the target window to display the resource. It has values like _blank, _top, _parent, _self, etc. Title - specifies a tool tip text that is displayed at the bottom Q16) Explain <img> tag and its attributes. Page No. 182 Q.17) Explain <marquee> tag and its attributes. Ans. The <marquee> tag is used to display scrolling text or images on the web page. The attributes used with <marquee> tag are as follows: Direction - specifies the direction of scrolling. Values Left, right, up, down. Behavior - indicates the type of scrolling. Values Scroll, alternate, slide Scrollamount - indicates how far the text shift forward. Value in pixels. Scrolldelay indicates how often the marquee text redraws. Value in milli seconds. Height - specifies the height in pixels for UP and down scroll. PAPER PATTERN (Portion Lesson No. 4 and HTML) 1. Fill ups - 3marks 2. True or False - 3marks 3. MCQ1-4 marks 4. MCQ2-4 marks 5. MCQ3-3 marks 6. Answer the following 4 marks 7. Write HTML code to create following web page - 4 marks

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version