HYPER TEXT MARK UP LANGUAGE
(HTML)
Rajishma T
rajishmatnair@gmail.com
www.facebook.com/ Rajishma
T Nair
twitter.com/userna...
Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
docu...
HTML
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags.
• HTML documents contain HT...
Html tags
• HTML markup tags are usually called HTML tags
• HTML tags are keywords (tag names) surrounded by
angle bracket...
<HTML>
<HEAD>
<TITLE>this is a new html document</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>
• The HEAD of your document point to above
window part.
• The TITLE of your document appears in the
very top line of the u...
headings
• Inside the BODY element, heading elements
H1 through H6 are generally used for major
divisions of the document....
• <html>
<h1>heading 1</h1>
<h2>heading 2</h2> <html>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading...
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
– <p>……</p>
– Break
• <br>
-Horizontal rule
.<hr>
• Character formatting tags
<FONT SIZE=“”> </FONT>
<B> </B>
<I...
• <STRIKE> </STRIKE>
 <BIG> </BIG>
 <SMALL></SMALL>
 <SUB> </SUB>
 <SUP></SUP>
lists
• unordered list
– An unordered list starts with the <ul> tag.
– Each list item starts with the <li> tag.
• Ordered ...
<html>
<body>
<h1><center>different thpes of lists in html</center></h1>
<ul>
<li>html</li>
<li>java</li>
</ul>
<ol>
<li>h...
• Html
• Java
1. Html
2. Java
Procedure oriented
-c
Object oriented
-java
images
 <IMG>This element defines a graphic image
on the page.
 Image File (SRC:source): This value will be a
URL (locat...
How to make a link
-The tags used to produce links are the <A>
and </A>.
-The <A> tells where the link should start and th...
table
 -The <TABLE></TABLE> element has four
sub-elements:
1. -Table Row <TR> </TR>.
2. -Table Header <TH></TH>.
-Table D...
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, ...
Column 1 Header Column 2 Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2
Table attributes
 BGColor: Some browsers support background
colors in a table.
 Width: specify the table width as an abs...
 CellPadding: Cell Padding is the space
between the cell border and the cell contents
and is specified in pixels.
 Align...
Table caption & header
 A table caption allows you to specify a line of text that
will appear centered above or bellow th...
Table Data and Table Header
Attributes
 Colspan: Specifies how many cell columns of the table this
cell should span.
 Ro...
forms
• <form> is just another kind of HTML tag
• HTML forms are used to create GUIs on Web pages
– Usually the purpose is...
The input tag
• Most, but not all, form elements use the input tag, with a
type="..." argument to tell which kind of eleme...
Text input
27
A text field:
<input type="text" name="textfield" value="with an initial value">
A multi-line text field
<te...
Buttons
• A submit button:
<input type="submit" name="Submit" value="Submit">
• A reset button:
<input type="reset" name="...
Checkboxes
• A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>
• type: "checkbox"
• name: used ...
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" nam...
Drop-down menu or list
• A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">gre...
Hidden fields
• <input type="hidden" name="hiddenField" value=“abc">
right here , don't you see it?
• What good is this?
...
Styling html with css
• Inline
– using the style attribute in HTML elements .
– An inline style can be used if a unique st...
• External
– external - using an external CSS file
– An external style sheet is ideal when the style is applied to
many pa...
If this presentation helped you, please visit our
page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.co...
Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, N...
Html
Upcoming SlideShare
Loading in …5
×

Html

237 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
237
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html

  1. 1. HYPER TEXT MARK UP LANGUAGE (HTML) Rajishma T rajishmatnair@gmail.com www.facebook.com/ Rajishma T Nair twitter.com/username in.linkedin.com/in/profilenam e 9020217968
  2. 2. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  3. 3. HTML • HTML stands for Hyper Text Markup Language • A markup language is a set of markup tags. • HTML documents contain HTML tags and plain text • HTML documents are also called web pages
  4. 4. Html tags • 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
  5. 5. <HTML> <HEAD> <TITLE>this is a new html document</TITLE> </HEAD> <BODY> This is what is displayed. </BODY> </HTML>
  6. 6. • The HEAD of your document point to above window part. • The TITLE of your document appears in the very top line of the user’s browser. • Document properties are controlled by attributes of the BODY element. – The BODY element of a web page is an important element in regards to the page’s appearance.
  7. 7. headings • Inside the BODY element, heading elements H1 through H6 are generally used for major divisions of the document. • Headings are permitted to appear in any order, but you will obtain the best results when your documents are displayed in a browser if you follow these guidelines: – H1: should be used as the highest level of heading, H2 as the next highest, and so forth. – You should not skip heading levels: e.g., an H3 should not appear after an H1, unless there is an H2 between them.
  8. 8. • <html> <h1>heading 1</h1> <h2>heading 2</h2> <html> <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> </html>
  9. 9. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
  10. 10. Paragraph – <p>……</p> – Break • <br> -Horizontal rule .<hr> • Character formatting tags <FONT SIZE=“”> </FONT> <B> </B> <I> </I> <U> </U> Color = “#RRGGBB” The COLOR attribute of the FONTelement.E.g.,<FONT COLOR=“#RRGGBB”>this texthascolor</FONT>  <STRONG> </STRONG> Browsers display this as bold.
  11. 11. • <STRIKE> </STRIKE>  <BIG> </BIG>  <SMALL></SMALL>  <SUB> </SUB>  <SUP></SUP>
  12. 12. lists • unordered list – An unordered list starts with the <ul> tag. – Each list item starts with the <li> tag. • Ordered list – An ordered list starts with the <ol> tag. – Each list item starts with the <li> tag. • Definition list – 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):
  13. 13. <html> <body> <h1><center>different thpes of lists in html</center></h1> <ul> <li>html</li> <li>java</li> </ul> <ol> <li>html</li> <li>java</li> </ol> <dl> <dt>procedure oriented</dt> <dd>-c</dd> <dt>object oriented</dt> <dd>-java</dd> </dl> </body> </html>
  14. 14. • Html • Java 1. Html 2. Java Procedure oriented -c Object oriented -java
  15. 15. images  <IMG>This element defines a graphic image on the page.  Image File (SRC:source): This value will be a URL (location of the image) E.g. http://www.domain.com/dir/file.ext or /dir/file.txt.  Alternate Text (ALT): This is a text field that describes an image or acts as a label. It is displayed when they position the cursor over a graphic image.  Alignment (ALIGN): This allows you to align the image on your page
  16. 16. How to make a link -The tags used to produce links are the <A> and </A>. -The <A> tells where the link should start and the </A> indicates where the link ends. Everything between these two will work as a link. - The example below shows how to make the word Here work as a link to yahoo. Click <A HREF="http://www.yahoo.com">here</A> to go to yahoo.
  17. 17. table  -The <TABLE></TABLE> element has four sub-elements: 1. -Table Row <TR> </TR>. 2. -Table Header <TH></TH>. -Table Data <TD></TD>. 1. -Caption <CAPTION></CAPTION>.  The table row elements usually contain table header elements or table data elements
  18. 18. <table border=“1”> <tr> <th> Column 1 header </th> <th> Column 2 header </th> </tr> <tr> <td> Row1, Col1 </td> <td> Row1, Col2 </td> </tr> <tr> <td> Row2, Col1 </td> <td> Row2, Col2 </td> </tr> </table>
  19. 19. Column 1 Header Column 2 Header Row1, Col1 Row1, Col2 Row2, Col1 Row2, Col2
  20. 20. Table attributes  BGColor: Some browsers support background colors in a table.  Width: specify the table width as an absolute number of pixels or a percentage of the document width. You can set the width for the table cells as well.  Border: choose a numerical value for the border width, which specifies the border in pixels.  CellSpacing: Cell Spacing represents the space between cells and is specified in pixels.
  21. 21.  CellPadding: Cell Padding is the space between the cell border and the cell contents and is specified in pixels.  Align: tables can have left, right, or center alignment.  BorderColor:
  22. 22. Table caption & header  A table caption allows you to specify a line of text that will appear centered above or bellow the table. <TABLE BORDER=1 CELLPADDING=2> <CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>  The Caption element has one attribute ALIGN that can be either TOP (Above the table) or BOTTOM (below the table). Table Data cells are represented by the TD element. Cells can also be TH (Table Header) elements which results in the contents of the table header cells appearing centered and in bold text.
  23. 23. Table Data and Table Header Attributes  Colspan: Specifies how many cell columns of the table this cell should span.  Rowspan: Specifies how many cell rows of the table this cell should span.  Align: cell data can have left, right, or center alignment.  Valign: cell data can have top, middle, or bottom alignment.  Width: you can specify the width as an absolute number of pixels or a percentage of the document width.  Height: You can specify the height as an absolute number of pixels or a percentage of the document height
  24. 24. forms • <form> is just another kind of HTML tag • HTML forms are used to create GUIs on Web pages – Usually the purpose is to ask the user for information – The information is then sent back to the server • A form is an area that can contain form elements – The syntax is: <form parameters> ...form elements... </form> – Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc • Other kinds of HTML tags can be mixed in with the form elements – A form usually contains a Submit button to send the information in he form elements to the server
  25. 25. The input tag • Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of element it is – type can be text, checkbox, radio, password, hidden, submit, reset, button, f ile, or image • Other common input tag arguments include: – name: the name of the element – value: the “value” of the element; – readonly: the value cannot be changed – disabled: the user can’t do anything with this element
  26. 26. Text input 27 A text field: <input type="text" name="textfield" value="with an initial value"> A multi-line text field <textarea name="textarea" cols="24" rows="2">Hello</textarea> A password field: <input type="password" name="textfield3" value="secret"> • Note that two of these use the input tag, but one uses textarea
  27. 27. Buttons • A submit button: <input type="submit" name="Submit" value="Submit"> • A reset button: <input type="reset" name="Submit2" value="Reset"> • A plain button: <input type="button" name="Submit3" value="Push Me"> • submit: send data • reset: restore all form elements to their initial state • button: take some action as specified by JavaScript 28
  28. 28. Checkboxes • A checkbox: <input type="checkbox" name="checkbox” value="checkbox" checked> • type: "checkbox" • name: used to reference this form element from JavaScript • value: value to be returned when element is checked • Note that there is no text associated with the checkbox— you have to supply text in the surrounding HTML 29
  29. 29. Radio buttons Radio buttons:<br> <input type="radio" name="radiobutton" value="myValue1"> male<br> <input type="radio" name="radiobutton" value="myValue2" checked> female • If two or more radio buttons have the same name, the user can only select one of them at a time – This is how you make a radio button “group” • If you ask for the value of that name, you will get the value specified for the selected radio button • As with checkboxes, radio buttons do not contain any text 30
  30. 30. Drop-down menu or list • A menu or list: <select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select> • Additional arguments: – size: the number of items visible in the list (default is "1") – multiple: if set to "true", any number of items may be selected (default is "false") 31
  31. 31. Hidden fields • <input type="hidden" name="hiddenField" value=“abc"> right here , don't you see it? • What good is this? – All input fields are sent back to the server, including hidden fields – This is a way to include information that the user doesn’t need to see (or that you don’t want her to see) – The value of a hidden field can be set programmatically (by JavaScript) before the form is submitted 32
  32. 32. Styling html with css • Inline – using the style attribute in HTML elements . – An inline style can be used if a unique style is to be applied to one single occurrence of an element. – <p style="color:blue;margin-left:20px;">This is a paragraph.</p> • Internal – An internal style sheet can be used if one single document has a unique style. – Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this: – <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
  33. 33. • External – external - using an external CSS file – An external style sheet is ideal when the style is applied to many pages. – With an external style sheet, you can change the look of an entire Web site by changing one file. – Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
  34. 34. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
  35. 35. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com

×