Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • HTML (Hyper Text Markup Language)

    Загружено:

    Deepak Patel
    736 просмотров53 страницы
    HTML is the coding language used to create hypertext documents for the World Wide Web. In HTML, a block of text can be surrounded with tags that indicate how it should appear (for example, in bold face or italics) html files are viewed with a World Wide Web browser.

    Исходное описание:

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PPT, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    HTML is the coding language used to create hypertext documents for the World Wide Web. In HTML, a block of text can be surrounded with tags that indicate how it should appear (for example, in bold face or italics) html files are viewed with a World Wide Web browser.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    736 просмотров53 страницы

    HTML (Hyper Text Markup Language)

    Загружено:

    Deepak Patel
    HTML is the coding language used to create hypertext documents for the World Wide Web. In HTML, a block of text can be surrounded with tags that indicate how it should appear (for example, in bold face or italics) html files are viewed with a World Wide Web browser.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 53

    HTML

    (Hyper Text Markup


    Language)
    What is HTML?
    • HyperText Markup Language, the coding
    language used to create hypertext
    documents for the World Wide Web. In HTML,
    a block of text can be surrounded with tags
    that indicate how it should appear (for
    example, in bold face or italics). Also, in HTML
    a word, a block of text, or an image can be
    linked to another file on the Web. HTML files
    are viewed with a World Wide Web browser.
    What is an HTML File?

    • An HTML file is a text file containing


    small markup tags
    • The markup tags tell the Web browser
    how to display the page
    • An HTML file must have an htm or html
    file extension
    • An HTML file can be created using a
    simple text editor
    Basic HTML Tags
    • Tag Description
    • <html> Defines an HTML document
    • <title> Defines title of your web page
    • <body> Defines the document's body
    • <h1> to <h6> Defines header 1 to
    header 6 <p> Defines a paragraph
    • <br> Inserts a single line break
    • <hr> Defines a horizontal rule
    • <!--> Defines a comment
    Example

    • <html>
    <title> SCS ,DAVV ,Indore </title>
    <h1> Welcome to SCS DAVV</h1>
    <body>
    The different course run at SCS are <br>
    <b>M.Tech.(CS)<br>M.Sc.
    (IT/CS)<br>MCA<br>MBA(CM) </b>
    </body>
    </html>
    HTML tags Cont…

    • <tt> Renders as teletype or mono


    spaced text
    • <i> Renders as italic text
    • <b> Renders as bold text
    • <big> Renders as bigger text
    • <small> Renders as smaller text
    HTML tags Cont…
    • Body tag Attributes
    <BGCOLOR> changes the background
    color of body. The color name is
    equivalent to hexadecimal no.
    <BACKGROUND> Specifies the background
    of document.
    <TEXT> changes the body text color.
    HTML tags Cont…
    • Types of lists.
    Unordered list(Bullets)
    Unordered list starts with <ul> and ends with </ul> tag. Each
    list item starts with <li> tag.
    Eg.
    <ul type=square>
    <li> M.Tech(cs)
    <li> M.Sc(it/cs)
    <li> MBA(cm)
    </ul>
    HTML tags Cont…
    • Ordered list (numbering).
    This list starts with <ol> and ends with </ol> tag. Each
    list item start with <li> tag. And type used to controls
    the numbering scheme to be used. For eg.
    Type=“1” will give counting numbers(1,2,……)
    Type=“A” will give Upper case letter(A,B,……)
    <ol type=“1” start=5>
    <li>India
    <li>America
    <li>china
    </ol>
    HTML tags Cont…
    • Definition list
    This list is used to define a term start with
    <dl> and ends with </dl>. It have two
    parts (i) definition term and (ii)
    definition description.
    <dl>
    <dt> SCS
    <dd> School of Computer Science
    <dt> SoEx
    <dd>School of Electronics.
    HTML tags Cont…
    • Table tag and its attributes. All table
    related tags are included in between
    <table> and </table>. Each row
    starts with <tr> and </tr> and each
    column starts with <td> and </td>.
    HTML tags Cont…
    • Graphics in html document. HTML
    mainly accepts two types of file
    format .jpg and .gif . The image can
    inserted into document using <IMG>
    tag.
    <img width=500 height=28
    src=“d:\chetan\p1.jpg>
    Linking Documents
    • HTML allows linking to other HTML documents
    or images. Clicking on text or image will open
    an entire web page or an image. The text or
    image that provide such links is called
    Hyperlink, Hypertext or Hotspot.
    • Browser distinguishes Hyperlinks from normal
    text by….
    • Each hyperlink appears blue in color
    • The hyperlink text/image is underlined.
    • When mouse cursor placed over it, mouse
    shape changes to shape of hand.
    Linking Documents
    Cont…….
    • Links are created by using <A> and
    </A> tags. Anything written in between
    this tags becomes hyperlink.
    • By using HREF attribute of <A> tag the
    document to navigate must be
    specifed.
    Ex.
    <A HREF=“filename.html”>
    Frames
    • Frames divides the browser screen into two or more HTML
    recognizable unique regions using <frameset> and
    </frameset> tags. Each region is known as frame.
    • The frameset tag requires following two attributes, for screen
    has to be divided into rows or columns.
    • Rows- This attribute is used to divide screen into multiple
    rows. It can be set equal to a list of values. The values can be:
    – A no. of pixel
    – Expressed as percentage of screen resolution.
    – The symbol *, which indicates the remaining space.
    Frames tag cont………
    • Cols:---- This divides the screen into multiple
    columns.
    • Ex.
    <frameset rows=“13%, 13% ,13%”> divides
    the screen into 3 equal horizontal sections.
    <frameset cols=“50%, 50%> splits 1st
    horizontal section into 2 equal vertical
    section.
    Frames tag cont………
    • Other attributes (after division of
    screen)-
    SRC=“URL”
    Marginheight=n – specifies the amount of
    white space to be left at the top and bottom
    of frame.
    Marginwidth=n - specifies the amount of white
    space to be left along the sides of frame.
    Name= “name” – identification of frame.
    Scrolling – values are yes/no/auto.
    Frames tag cont………
    • Example
    <frameset rows=“30,*”>
    <frameset cols=“50%,50%”>
    <frame src=“file1.html”>
    <frame src=“file2.html”>
    </frameset>
    </frameset>
    Introduction to Java Script
    • Java script is (object-oriented) script
    language, that allows creation of
    interactive web page. It allows to process
    the user entries which are loaded in html
    form.
    Advantages of Java Script-----
    1. An Interpreted Language.
    2. Embedded with HTML.
    3. Performance.
    4. Procedural Capabilities – like conditional, looping etc.
    5. Design for programming user events.
    6. Easy debugging and testing.
    7. Platform independence / Architecture Neutral.
    Writing Java script to HTML
    • Java scripts syntax are embedded into an
    html file .
    The browser use built-in Java Script engine
    to interpret this code. The browser is
    given this information using HTML tags
    <script>……<script>.
    Syntax--------
    <script language=“javascript”>
    Java script codes are written here
    </script>
    Basic programming
    •
    Techniques
    Java scripts offers all the programming capabilities that are
    found in most programming languages.
    • The <head> tag is generally used to declare javascript
    variable. Variables names are case sensitive.
    • The primitive data types that javascript supports are
    Number(consist of integer and floating point), Boolean ( true or
    false) ,String (which are enclosed by double(“ “) or single
    quotes (‘ ‘).
    Creating Variable - var <variable name>=value;
    Eg. Var name;
    Var phone=589664
    Var adds=“indore”
    • Example of java script –
    <html>
    <head>
    <script language=“JavaScript”>
    Var name=prompt (“enter your name”);
    </script> </head>
    <body>
    <script language=“javascript”>
    <document.write(“<b>hello” + name);
    </script> </body>
    </html>
    • <html>
    • <title>Program for tabled</title>
    • <head>
    • <script type="text/Javascript">
    • var n =prompt("enter no","0");
    • var i,p;
    • </script>

    • </head>
    • <body>

    • <script type="text/Javascript">
    • for(i=1;i<=10;i++)
    • {
    • p=i*n;
    • document.write(n+"*"+i+"="+p+"<br>");
    • }
    • </script>

    • </body>
    • </html>
    Function in JAVASCRIPT
    • Built in functions-
    Eval()- this function is used to convert a string
    expression to a numeric value.
    Eg. Var total=eval(“10*10+5”);
    parseInt()- this function is used to convert a
    string value to integer. It returns first integer
    contained in a string or 0 if the string does
    not begin with integer
    Eg. Var N=parseInt(“123xyz”);  N=123
    Alert()- Which works similar to messagebox
    function in vb.
    User defined functions
    • Functions are declared and created using
    keyword function. A function can have
    following ---
    • A name of funciton
    • A list of parameters that will accept
    values passed to the function when called.
    • A block of javascript code that defines the
    function.
    • Generally function are created within the
    <head>….</head> tag. This ensures that
    all functions will be parsed before they
    are invoked or called.
    • Eg.—
    <html>
    <head>
    <title> Welcome to SCS, DAVV Indore </title>
    <script type=“text/javascript”>
    var name=“ “;
    Function he()
    {
    name=prompt(“Enter Your Name”,”Name”);
    Alert(“Hello “+name ” +” Welcome to my page!”);
    } Function be()
    { alert(“Bye “); }
    </script></head>
    <body onLoad=“he();” onUnLoad=“be();” >
    < img src=“p1.jpg”>
    </body>
    </html>
    Forms used by a Web Site
    • An html form provides data gathering
    functionality to a web page. HTML forms
    provides all GUI controls. The data
    submitted can be processed at web server
    by javascript .
    • Java script allows the validation of data
    entered into a form at the client side.
    • HTML provides the <form> </form> tags
    with which an html form an be created to
    capture user input. All form object are
    described betewee <form> </form>
    Example
    • <html>
    • <title> Use of Form Tag </title>
    • <head>
    • <script type="text/JavaScript">
    • function val(f1)
    • {
    • alert("Your name is "+document.forms[0].elements[0].value);
    • alert("Your Class is "+document.forms[0].elements[1].value);
    • }
    • </script>
    • </head>
    • <body>
    • <form name="f1">
    • Stduent DATABASE <br><br>
    • Enter your name:<input type=text name="t1" value=""><br>
    • Enter your Class:<input type=text name="t1"

    • value=""><br><br><br>
    • <input type="button" name="b1" value="show"

    • onClick="val(form)">

    • </form>
    • </body>
    • </html>
    The HTML form elements that can be
    specified as attributes to <input> tag are :
    Form Elements Description & Syntax

    Text A Text field (<input type=“text”>)


    Password A password text field in which each keystroke
    appears as *
    Button A new element that provides a button other that
    submit or reset button.
    Radio A radio button (<input type=“radio”>)
    Reset A reset button (<input type=“reset”>)
    Submit A submit button (<input type=“submit”>)
    TextArea A multiline text entry field
    Select A selection list
    (<select>
    <option>
    Opt1
    Opt2
    </option>
    </select>
    Methods of form elements
    Form Element Name Method Name Description
    Text Fires when form cursor
    Password onFocus() enters into an object.
    TextArea
    Text Fires when form cursor
    Password onBlur() moved away from an
    TextArea object.

    Text Fires when text is


    Password onSelect() selected in an object.
    TextArea

    Text Fires when text is


    Password onChange() changed in an object.
    TextArea

    Button Fires when an object is


    Radio clicked on.
    Checkbox OnClick()
    Submit
    Reset
    User Defined Objects
    • In addition to built in objects, javascript permits for
    the creation of user-defined objects. As like other
    objects, user-defined objects have properties and
    methods. After creation of such object, any
    number of instances of this object can be created.
    • For eg---- user defined object Emp with three
    properties – name, age, sal and one method insert
    Function Emp(n,a,s)
    { Emp e=new Emp();
    this.name=n;
    this.age=a;
    this .sal=s;
    }
    JavaScript Event Handlers
    JavaScript Event Handler Will be called when:
    onAbort Loading of image is aborted as a
    result of user action.
    onBlur A document, window, frame or
    form element loses current input
    focus.
    onChange Text field, text area, selection is
    modified.
    onClick Link, client-side image map area or
    document clicked.
    onDblClick Link, client-side image map area or
    document double clicked.
    onDragDrop A dragged object is dropped in a
    window or frame.
    onError Error occurs during loading image,
    a page or a window.
    onKeyDown The user presses a key.
    onKeyPress The user presses and releases a
    key.
    JavaScript Event Handlers Cont..
    onMouseOver When mouse is moved over a
    image or a link etc.
    onMouseUp User release mouse button.
    onReset User reset a form by clicking on the
    form’s reset button.
    onSelect Text is selected in textfiled or
    textarea.
    onSubmit User preses a form’s submit
    button.
    onUnload User exit a document or frame set.
    DHTML (Dynamic HTML)
    • DHTML is a new and emerging technology which
    combines HTML with Cascading Style Sheets
    (CSSs) and scripting language.
    • HTML specifies web page elements like table,
    frame, bullet etc.
    • Cascading Style Sheets can be used to
    determine an element size, color, position and
    other features.
    • Script language are used to manipulate the web
    page element so that styles assigned to them
    changes to response user’s input.
    Cascading Style Sheets
    • Style Sheets are used for adding
    styles (eg. Font, colors, spacing) to
    web documents. It provide standards
    and uniformity throughout a web site
    and other dynamic attributes. HTML
    elements on web page are bound with
    style sheet. The advantage of style
    sheet includes ability to make global
    changes to all documents from a
    single location. <style>….<\style >
    tags are used for style process.
    Between this tags HTML tags are
    specified.
    Main points of DHTML
     It is considered to be made up of
    – HTML
    – Cascading Style Sheets (CSS)
    – Scripting language
     All three of these components are linked via
    Document Object Model (DOM)
     DOM is the interface that allows scripting
    languages to access the content, style, and
    structure of the web documents and change
    them dynamically
    Tools of DHTML
     HTML
    – Partitions and Organizes the content
     CSS
    - Defines the Presentation of the content
     Scripting - JavaScript, JScript, VBScript
    – Adds interactivity to the page
     DOM- Document Object Model
    – Defines what and how elements are exposed
    for script access
    Main points of CSS

    CSS is Cascading Style Sheets


    It is a specification controlled by the World
    Wide Web Consortium (W3C).
    HTML controls the organization of a Web
    page document
    CSS controls the presentation and layout of
    the Web page document elements
    What CSS can do?
     With CSS you can separate form from
    structure
     Control layout (alignment, spacing,
    margins, colors, floating elements
    etc)
     Maintain and update many pages
    faster and easier
    CSS-Terminology
    CSS is declared as rules:
    - Eg: H1 {color: green}
    - Means that all text surrounded by the
    <H1></H1> tags should be displayed in green
    color
    A rule has two parts
    - H1 {color:green}

    SELECTOR { DECLARATION }
    CSS – Terminology…
     Declaration has two parts:
    HI {color : green }
    property : Value

    • In general:
    • Element(s) {Property1:Value;
    Property2:Value;}
    Eg.: H1, B {color:olive; background:yellow; font-
    •
    family: arial, courier }
    CSS-Adding styles to web
    pages
     Four ways
    – Embed a style sheet within HTML
    document
    – Link to an external stylesheet from
    the HTML document
    – Add styles inline in the HTML
    document
    – Importing style sheets
    CSS-Embed a style sheet
    • All stylesheet information lies at the
    top of the HTML code (in the head
    portion)
    • Eg:
    <HTML>
    <STYLE TYPE=“text/css”>
    <!—H1 {color: green; font-family: impact}-- >
    </STYLE>
    <HEAD>
    <BODY> . . .
    CSS-Link to an external
    style
     An externally defined sheet
    stylesheet is used as a style
    template that can be applied to a number of pages
     A text file (with ext .css) contains the stylesheet rules
    to be applied to a page (or set of pages)
    • Eg. A file named ‘mystyles.css’
    H1 {color: green; font-family: impact}
    B {color: red; font-family: courier}
    This file is linked to the HTML document (<LINK>)
    • In the web Page:
    • <HTML>
    • <LINK REL=stylesheet HREF=“mystyles.css”
    TYPE=“text/css”>
    • <HEAD>
    • <BODY> . . .
    CSS-Add styles inline
    • Applying stylesheets rules to particular HTML
    tags
    • Eg:
    <B STYLE=“color: purple; background:
    yellow”>Adding Inline styles</B>
    • The style applies to only that particular <B>
    tag
    CSS – Importing
    Stylesheets
    Style Sheets which are external to the HTML
    document are imported (included) into the
    <style> element within the <head> element
    of the current document.
    Similar to linking, but useful when you want to
    override some style rules when you include it
    in your own stylesheet.
    <style type="text/css">
    <!-- @import
    url(http://www.cen.com//houseBasic.css);
    ul ul { list-style-type: circle; } --> </style>
    The imported sheets must appear before any
    document-specific styles
    CSS- Classes
     Selectively apply a style to HTML elements
     you can define different classes of style to
    the same element, and apply the
    appropriate class of style when required
     HTML
    <P CLASS="first">The first paragraph</P>
    <P CLASS="second">The second paragraph</P>
    <P CLASS="third">The third paragraph</P>
     Stylesheet
    P.first { color: green }
    P.second { color: purple }
    P.third { color: gray }
    DOM-Document Object
    Model
     The Document Object Model is a
    platform- and language-neutral
    interface that will allow programs
    and scripts to dynamically access
    and update the content, structure
    and style of the document
     The DOM details the characteristic
    properties of each element of a Web
    page, thereby detailing how we
    might manipulate these components
    and, in turn, manipulate the page
    DOM…
    Document Object Model is not a "part" of
    Scripting languages. The DOM stands alone,
    able to be interfaced with any programming
    language designed to do so
    The W3C DOM is the recommended
    standard to be exposed by each browser
    Microsoft Internet Explorer and Netscape do
    not share the same DOM.
    DOM…

     Both (IE and Netscape) DOMs break down Web


    pages into roughly four types of components
    – Objects, Properties, Events and Methods
     Objects :
    – Container which reflects a particular element of a
    page
    – objects "contain" the properties and methods which
    apply to that element
    – Example: the submit object
    DOM…
     Properties:
    – Characteristics of an object
    – Example: the ‘document’ object
    possesses a ‘bgColor’ property which
    reflects the background color of the
    page.
    – Using a programming language (e.g.
    JavaScript) you may, via this property,
    read or modify the background color of
    a page
    DOM…

     Methods:
    – A method typically executes an action which acts
    upon the object by which it is owned
    – Example: Alert
     Events:
    – Used to trap actions related to its owning object
    – Typically, these actions are caused by the user
    – Example: when the user clicks on a submit button
    Using <span> tag
    • Span tag play an important role in style sheets. In body of the
    document, <span> … </span> tag is used to set boundaries of
    the rule’s styling specification.
    For eg.
    <html>
    <head> <style type=“text/css”>
    P{font-size:12pt, text-align:justify}
    .que {color:brown; font-style:italic}
    .ans {color:red}
    .big {font-size:25pt; color:red} </style> </head>
    <body><body>
    <p class=“que”>this <span class=“big” >style sheet </span>
    class </p>
    <p class=“ans”> style sheet class used in paragraph</p>
    </body>

    Вам также может понравиться