HTML BY JODY C SALAS
Download as PPT, PDF0 likes206 views
This document provides an introduction to HTML (Hyper Text Markup Language). It defines HTML, discusses its basic elements and tags including body, headings, anchors, and formatting elements. It also covers HTML forms, inputs, and cascading style sheets (CSS). The objectives are to understand HTML elements and tags, create forms, and use CSS pseudo-classes. Key elements discussed include the <head>, <title>, <body>, <h1-h6>, <a>, <font>, lists, radio buttons, checkboxes and <form> tags.
HTML BY JODY C SALAS
- 1. Contents • Introduction to HTML • What is HTML ? • Basic HTML Document. • Body & Anchor Elements. • Formatting Elements • Forms • Cascading StyleSheet
- 2. Objectives • Understand HTML • Understand Different Elements in HTML • Understand Body, Anchor & Formatting Elements • Creating Forms • Cascading StyleSheet • CSS –Pseudo Classes
- 3. Introduction To HTML • HTML stands for “Hyper Text Mark up Language” • HTML is an improvised version of “Standard Generalized Mark Up Language” (SGML) • It was developed by Tim Berners Lee in 1990
- 4. What is HTML? • HTML is encoding language for creating web pages that can be displayed by any browser. • It consists of tags and elements. • It is written using plain text editors or HTML editor. • It should have extension .htm or .html • Elements in HTML enclosed in angular brackets are called Tags. • Tags are not case sensitive.
- 5. Basic HTML Document <html> <head> <title> SCHOOL </title> </head> <body> Hello HTML </body> </html> Displays Title on Title Bar of Web Page HTML Tags HEAD Tags
- 6. Body Elements • Through Body Element user can change all the text, background color & images of the web page. • Body Element contains the following Attributes: • <BODY BGCOLOR=“Yellow”> • <BODY BACKGROUND=“STAR.JPG”> • <BODY TEXT=“RED”> • <BODY LEFTMARGIN=“60”>
- 7. Anchor Elements • This element marks the text as Hyper Link. It is defined as <A> • The Anchor Element contains the following attribute <A HREF =“C:DesktopResume.doc”> Click </A> Creates a Hyper Link Anchor Tag
- 8. Formatting Elements • HTML defines many Formatting Elements • Following are Few of the formatting elements Formatting Element Description <H1> to <H6> Heading Element which defines the heading of the text <Font> ...</Font> Font element defines the font of the text with attributes size, face, color <B>...</B> Bold face element <U> ... </U> Underline element <I>...</I> Italic element
- 9. Formatting Element (continued) Formatting Element Description <STRIKE>...</STRIKE> Strike element <SUB> ... </SUB> Subscript element <SUP>... </SUP> Superscript element <FONT SIZE=20 FACE=“ARIAL” COLOR=GREEN > WELCOME </FONT> Example :
- 10. Example on Formatting Elements <Html> <Head> <Title> Welcome To SCHOOL </Title></Head> <body bgcolor="Yellow" text="Red" leftmargin="60"> <A href=“c:abc.txt">Click </A> <H1>SCHOOL</H1> <H2>SCHOOL</H2> <H3>SCHOOL</H3> <H4>SCHOOL</H4> <H5>SCHOOL</H5> <H6>SCHOOL</H6> <Font size=10 face= "Book Antigua" color = "Black"> Welcome to XYZ SCHOOL </Font> <br> <B> Warden Road </B> <br> <I> MUMBAI </I><br> <U> Admissions</U> <br> FEE: <Strike>500 /- </Strike> Only 250/- <br> 2<Sup>2</Sup>=4 </br> H<Sub>2</Sub>0</br> </Body> </Html> Heading Elements Body Element Anchor Element Formatting Elements
- 11. Forms • Form is an interface where user can interact with the system by providing some data. • This is defined by Form Tag - <FORM> … </FORM> • Following can be created using form – Text field – Password Field – Combo Box – List Box – Radio Button – Check Box – Command Button
- 12. Form Elements Form Elements Description Text Field Can create a Text Field by using Input Element with Type Attribute. Pass Word Field When text is entered in Pass Word Field it shows **** Symbol Combo Box It can have multiple values and it allows user to select one value at a time List Box It can have multiple values and allows user to select more than one value at a time Radio Button Can create a Radio Button by using Input Element with Value and Name Attribute Check Box Can create Check box by Using Input Element Command Button This is useful for submitting any data that is helpful in transferring data across different interfaces
- 13. Example - Form Elements <Form name=“frm”> Enter Your Login ID <Input type=text size=20> Enter Your Pass Word <Input type=Password Maxlength=8 size=20> <select name=“combo1”> <option>Value1</option> <option>Value2</option> <option>Value3</option> </select> <select name=“combo1” multiple> <option>Value1</option> <option>Value2</option> <option>Value3</option> </select> Select Gender <input type=Radio value=Male Name=Checked>Male <input type=Radio value=Female Name=Checked>Female Select Hobbies <input type= Checkbox >Cricket <input type= Checkbox > Reading <input type= Checkbox > Watching TV<br> <input type=submit value=“Load Data”> <input type=button value=“Update Data”> </Form>
- 14. Preview of web page
Editor's Notes
- #5: Faculty notes: Text editors are like Notepad, WordPad Etc.