Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Html
1.
2. 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
3. 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
4. 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
5. 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
7. • 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.
8. 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.
13. 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):
15. • Html
• Java
1. Html
2. Java
Procedure oriented
-c
Object oriented
-java
16. 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
17. 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.
18. 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
21. 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.
22. 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:
23. 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.
24. 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
25. 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
26. 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
27. 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
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
28
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
29
30. 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
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")
31
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
32
33. 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>
34. • 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>
35. 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
36. 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
