Html

HYPER TEXT MARK UP LANGUAGE (HTML)

Rajishma [email protected]/ Rajishma T

Nairtwitter.com/usernamein.linkedin.com/in/profilename9020217968

http://www.facebook.com/Rajishma

http://www.facebook.com/Rajishma

Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd

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

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

<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 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.

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.

• <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>

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

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.

• <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 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):

<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>

• Html• Java

1. Html2. 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

(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

http://www.domain.com/dir/file.ext

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 wordHere work as a link to yahoo.

Click <A HREF="http://www.yahoo.com">here</A> togo to yahoo.

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

<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>

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 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.

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:

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.

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

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

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, file, 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

27

Text inputA 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

28

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

29

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

30

Radio buttonsRadio 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

31

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")

32

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

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>

• 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>

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

http://facebook.com/baabtra

http://facebook.com/baabtra

http://www.baabtra.com/

http://www.massbaab.com/

http://www.baabte.com/

Contact Us

Emarald Mall (Big Bazar Building)Mavoor Road, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550

NC Complex, Near Bus StandMukkam, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550

Start up VillageEranakulam,Kerala, India.

Email: [email protected]

Technology

Html