Académique Documents
Professionnel Documents
Culture Documents
Sr.No. 1. 2. 3. 4. 5. Topic Name Introduction to html Use of Font Use of Horizontal Line Use ofBold,Italics and Underline Use of Unordered list,Ordered list and Definition list Use of Superscript and Subscript Use of Table Use of Forms Use of Image Use of Links Page No. 1-2 2-3 3 3-4 4-6
6. 7. 8. 9. 10.
(1)Introduction to HTML
H-T-M-L are initials that stand for HyperText Markup Language. Break it down as: Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want. Text is what you will use. Real, honest to goodness English letters. Mark up is what you will do. You will write in plain English and then mark up what you wrote. Language because they needed something that started with "L" to finish HTML and Hypertext Markup Louie didn't flow correctly. Because it's a language, really -- but the language is plain English. HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags Syntax: <tagname>content</tagname>
HTML Page Structure <html> <head> <title>The most basic HTML page</title> </head> <body>
(2)Use of Font
The <font> tag specifies the font face, font size, and font color of text. (a) HTML <font> Face Attribute: The face attribute specifies the font of the text inside a <font> element. Syntax: <font face="font_family"> Attribute Values Value font_family Description The font of the text. To specify a prioritized list of several fonts, separate the names with a comma (like this <font face="verdana,arial,sans-serif">
(b)HTML <font> Size Attribute: The size attribute specifies the size of the text inside a <font> element. Syntax: <font size="number"> Attribute Values Value number Description The size of the text. Possible values: a number from 1 to 7. Browser default is 3.
(c) HTML <font> Color Attribute: The color attribute specifies the color of the text inside a <font> element. Syntax: <font color="color_name|hex_number|rgb_number"> Attribute Values Value color_name hex_number rgb_number Description Specifies the text color with a color name (like "red") Specifies the text color with a hex code (like "#ff0000") Specifies the text color with an rgb code (like "rgb(255,0,0)")
however, this may not be an issue. To create underlined text, place the desired text within the <u>...</u> tags. Syntax: <u>Your underlined text goes here.</u>
(b)Ordered Lists: An ordered list has what is commonly called "numbered list". We can add a numbered list by adding an ordered list. The ordered list is contained within the Ordered list tags, <ol> </ol> tags. Each item in the list will be contained within the list item tags, <li> </li> Syntax: <ol> <li>First Item</li>
<li>Second Item</li> </ol> Output: 1. First Item 2. Second Item (c)HTML Definition Lists: A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list.The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list). Syntax: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> Output: Coffee - black hot drink Milk - white cold drink
(b)Subscript:This kind of text is lowered below the baseline of the preceding text and is displayed in a smaller font. This can be used to display chemical notation. Syntax: <sub> place the desired text.</sub>
(7)Use of Table
Tables are defined with the <table> tag.A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. Syntax: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Output: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 HTML Table Tags Tag <table> <th> <tr> <td> <caption> <colgroup> <col /> <thead> <tbody> <tfoot> Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines a group of columns in a table, for formatting Defines attribute values for one or more columns in a table Groups the header content in a table Groups the body content in a table Groups the footer content in a table
(8)Use of Forms
HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form. Syntax: <form> . input elements . </form>
8
HTML Forms - The Input Element The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. For example(in case of Password): Syntax: <form> Password: <input type="password" name="pwd" /> </form> Output: Password:
(9)Use of Image
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag.To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax: <img src="url" alt="some_text" width=300 height=250/> The Alt Attribute The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
9
Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image
(10)Use of Links
HTML Hyperlinks (Links).A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.When you move the cursor over a link in a Web page, the arrow will turn into a little hand.Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways: 1. To create a link to another document, by using the href attribute 2. To create a bookmark inside a document, by using the name attribute HTML Link Syntax The HTML code for a link is simple. It looks like this: <a href="url">Link text</a> The href attribute specifies the destination of a link.
10