Back to Study material
WT

Unit 2

Web Page Designing

 


 

HTML was created by Tim Berners-Lee at CERN.

 

HTML stands for Hyper Text Markup Language. It is a formatting language used to define the appearance and contents of a web page. On a web page, it helps us to arrange text, images, audio, and video.

 

List

Lists of data are defined using HTML Lists. One or more list elements can appear in any list. HTML lists can be divided into three categories:

  • Ordered List or Numbered List (ol)
  • Unordered List or Bulleted List (ul)
  • Description List or Definition List (dl)
  • Ordered List or Numbered List (ol)

    By default, all list items in ordered HTML lists are labelled with numbers. It's also known as a numbered list. The <ol> tag begins the organized list, and the <li> tag starts the list objects.

     

    Unordered List or Bullet List (ul)

    All list items in an HTML Unordered list are labelled with bullets. It's often referred to as a bulleted list. The tag begins the unordered list, and the tag begins the list pieces.

     

    Description List or Definition List (dl)

    HTML Description List is a list format that HTML and XHTML also support. It's also known as a definition list, and it's similar to a dictionary or encyclopedia in that entries are ordered alphabetically.

     

    The following three tags are included in the HTML specification list:

          <dl>tag - The start of the list is defined by the name.

          <dt>tag - A word is defined by a tag.

          <dd>tag - The word meaning is defined by tag (description).

     

    Table

    To view data in a tabular format (row * column), use the HTML table tag. In a row, there can be several columns.

     

    Using the <table> element and the <tr>, <td>, and <th> elements, we can construct a table to show data in a tabular format.

     

    Table row is identified by the <tr> tag, table header by the <th> tag, and table data by the <td> tag in each table.

     

    HTML tables are used to monitor the page's layout, such as the header section, navigation bar, body material, and footer section, among other things. To control the layout of the page, however, it is recommended that you use the div tag rather than the table tag.

    Tag

    Description

    <table>

    It establishes a table.

    <tr>

    In a table, it defines a row.

    <th>

    In a table, it specifies a header cell.

    <td>

    In a table, it determines a cell.

    <caption>

    The table caption is described by it.

    <colgroup>

    It is used to format a group of one or more columns in a table.

    <col>

    It's used in conjunction with elements to define column properties for each column.

    <tbody>

    It's used to organize the material of a table's body.

    <thead>

    In a table, it's used to group the header information.

    <tfooter>

    In a table, it's used to group the footer stuff.

     

    Images

    The img tag in HTML is used to display a picture on a web page. The HTML img tag is an empty tag with only attributes; no closing tags are used in the HTML image element.

     

    Attributes of img tag

    The src and alt attributes of the HTML img tag are essential. The HTML image tag's attributes are listed below.

     

          src - It's a required attribute that defines the image's source or direction. It tells the browser where to look on the server for the picture.

     

    The picture may be in the same directory or on a different server.

     

          alt - If the image can't be shown, the alt attribute specifies an alternative text. The alt attribute's meaning describes the picture in terms. The alt attribute is thought to be beneficial to SEO.

     

          width - It's an optional attribute that specifies the image's width for display. It is not advised at this time. Instead of using the width variable, you can use CSS.

     

          height - It is h3 the image's height. Iframe, image, and object elements are all supported by the HTML height attribute. It is not advised at this time. Instead of using the height variable, you can use CSS.

     

    Frames

    Frames allow us to split the browser window into multiple rectangular areas. Each area has its own html web page, which functions independently.

     

    A frameset is a collection of frames that spans the entire browser. It instructs the browser on how to divide the browser window into frames and which web pages should be loaded in each frame.

     

    The following table lists the different tags that can be used to create frames:

    Tag

    Description

    <frameset>

    </frameset>

    It takes the place of the body> tag. It doesn't have the tags found in the body> element; instead, it has the frame> element, which is used to add each frame.

    <frame>
    </frame>

    The content of various frames in a web page may be defined.

    <base>

    </base>

    It's used to set the default target frame in any page with links to content that's displayed in a different frame.

     

    Forms

    Forms are used to input the values. These values are sent to the server for processing. Forms use input elements such as text fields, check boxes, radio buttons, lists, submit buttons etc. to enter the data into it.

     

    The following table describes the commonly used tags while creating a form:

    Tag

    Description

    <form> </form>

    It is used to create HTML forms.

    <input> </input>

    Specifies the input field

    <textarea> </textarea>

    This property specifies a text area control that enables multi-line text to be entered.

    <label> </label>

    The label for an input element is defined.

     

    Key takeaway:

  • The term "hypertext" refers to text that serves as a connection.
  • The term markup refers to the symbols used to describe the text's structure. The markup symbols, also known as tags, tell the browser how to display the text.
  • The term "language" refers to the grammar of the language, which is identical to that of any other language.
  •  

     


    Cascading Style Sheets (CSS) is an acronym for Cascading Style Sheets. It aids in the definition of HTML element presentation as a separate file known as a CSS file with the.css extension.

     

    CSS allows you to adjust the formatting of any HTML element by making just one change. All changes will be immediately mirrored on all of the website's web pages where that feature appeared.

     

    Why use CSS

    These are the three most important advantages of CSS:

     

  • Solves a big problem
  • Font, color, background design, element alignments, border, and size tags had to be replicated on every web page before CSS. This was a lengthy procedure. For example, if you're building a large website with fonts and color details on every page, it'll be a time-consuming and costly process. CSS was developed to address this problem. It was a suggestion from the World Wide Web Consortium (W3C).

     

    2.     Saves a lot of time

    CSS style definitions are stored in external CSS files, so modifying only one file will alter the entire website.

     

    3.     Provide more attributes

    CSS offers more specific attributes for defining the look and feel of a website than plain HTML.

     

    CSS Rules

    The styles that we must build in order to create style sheets are known as CSS Rules. The presence of the associated HTML element is described by these rules.

     

    CSS syntax can be summarized as follows:

    Selector {property: value;}

     

    Key takeaway:

  • The CSS rule is applied to the selector, which is an HTML element.
  • The property defines the attribute corresponding to the selector that you want to modify.
  • A given value may be assigned to a property.
  • A colon separates Property and Value (:).
  • A semicolon separates each declaration (;).
  •  

     


    XML is a medium for storing and transporting data that is independent of software and hardware.

     

    The eXtensible Markup Language (XML) stands for eXtensible Markup Language.

    XML, like HTML, is a markup language that was created to store and transport data. It was also created to be self-descriptive.

     

    Document Type Definition (DTD) is an acronym for Document Type Definition. It specifies the legal components of an XML document. It's used to specify the structure of a document using a list of legal elements and attributes.

     

    Its main function is to describe an XML document's structure. It includes a set of legal elements that are used to describe the framework.

     

    Checking validation

    You must verify the validation before continuing with the XML DTD. If an XML document contains the correct syntax, it is said to be "well-formed."

     

    A legitimate and well-formed XML document is one that has been checked against a DTD.

     

    Description of DTD

    <!DOCTYPE employee: It specifies that the document's root variable is employee.

    <!ELEMENT employee: The employee element is described as having three elements: "firstname, lastname, and email."

    <!ELEMENT firstname: It specifies that the firstname element is of type #PCDATA. (a data form that can be parsed).

    <!ELEMENT lastname: It specifies that the lastname element is of type #PCDATA. (a data form that can be parsed).

    <!ELEMENT email: It specifies that the email element is of type #PCDATA. (a data form that can be parsed).

     

    Syntax

    Basic syntax of a DTD is as follows:

    <!DOCTYPE element DTD identifier

    [

       declaration1

       declaration2

       ........

    ]>

     

    Internal DTD

    If elements are declared inside the XML files, the DTD is referred to as an internal DTD. The standalone attribute in the XML declaration must be set to yes to refer to it as internal DTD. This means that the declaration is self-contained and does not depend on a third-party source.

     

    Syntax

    The syntax of the internal DTD is as follows.

    <!DOCTYPE root-element [element-declarations]>

     

    element-declarations is where you declare the elements, where root-element is the name of the root element.

     

    External DTD

    The elements of an external DTD are declared outside of the XML format. The device attributes, which can be either a legal.dtd file or a valid URL, are used to access them. The standalone attribute in the XML declaration must be set to no to refer to it as an external DTD. This means that the declaration contains data from a third-party source.

     

    Syntax

    The syntax of the internal DTD is as follows.

    <!DOCTYPE root-element SYSTEM "file-name">

    where file-name is the name of the.dtd file.

     

    Types

    You may use device identifiers or public identifiers to refer to an external DTD.

     

    System Identifiers

    You may define the location of an external file containing DTD declarations using a device identifier. The following is the syntax:

    <!DOCTYPE name SYSTEM "address.dtd" [...]>

     

    As you can see, it includes the keyword SYSTEM as well as a URI reference to the document's location.

     

    Public Identifiers

    The following is a list of public identifiers that can be used to find DTD resources:

    <!DOCTYPE name PUBLIC "-//Beginning XML//DTD Address Example//EN">

     

    As you can see, it starts with the keyword PUBLIC and then moves on to a more specific identifier. An entry in a catalog is identified by a public identifier. Public identifiers may be in any format, however Formal Public Identifiers, or FPIs, are a popular choice.

     

    Key takeaway:

  • Document Type Definition (DTD) is an acronym for Document Type Definition.
  • It specifies the legal components of an XML document.
  • It's used to specify the structure of a document using a list of legal elements and attributes.
  • If elements are declared inside the XML files, the DTD is referred to as an internal DTD.
  • The elements of an external DTD are declared outside of the XML format.
  •  

     


    The XML schema language is a way of expressing constraints in XML documents. There are several schema languages in use nowadays, such as Relax-NG and XSD (XML schema definition).

     

    The structure of an XML document is described by an XML schema. It's similar to DTD, but it gives you more control over the XML structure.

     

    Checking validation

    If an XML document contains the correct syntax, it is said to be "well-formed." An XML document that has been validated against Schema is well-formed and correct.

     

    Description of XML Schemas

    <xs:element name="employee">: It specifies the employee element.

    <xs:complexType>: It specifies that the 'employee' variable is of complex nature.

    <xs:sequence>: It specifies that a complex form is made up of a series of elements.

    <xs:element name="firstname" type="xs:string"/>: It specifies that the 'firstname' element is of the string/text kind.

    <xs:element name="lastname" type="xs:string"/>:  It specifies that the 'lastname' element is of the string/text kind.

    <xs:element name="email" type="xs:string"/>: It specifies that the 'email' element is of the string/text kind.

     

    XML Schemas data types

    In the XML schema, there are two kinds of data types.

  • simpleType
  • complextype
  •  

    simpleTypes

    You can use simpleType to create text-based components. It has fewer attributes and child features, and it can't be left blank.

     

    complexTypes

    You may use the complexType to carry several attributes and components. It can be filled with additional sub elements or left bare.

     

    Key takeaway:

  • The XML schema language is a way of expressing constraints in XML documents.
  • There are several schema languages in use nowadays, such as Relax-NG and XSD.
  •  The structure of an XML document is described by an XML schema.
  • It's similar to DTD, but it gives you more control over the XML structure.
  •  

     


    Document Object Model is an acronym for Document Object Model. It establishes a protocol for document access and manipulation. The Document Object Model (DOM) is an HTML and XML document programming API. It specifies the logical structure of documents as well as how they are accessed and modified.

     

    One of the main goals of the Document Object Model as a W3C specification is to provide a basic programming interface that can be used in a broad range of environments and applications. Any programming language can use the Document Object Model.

     

    The XML Document Object Model (DOM) specifies a standard for accessing and manipulating XML data.

     

     


    How Can XML be Used?

          Many areas of web creation use XML.

          Data and presentation are often separated using XML.

     

    XML Separates Data from Presentation

          XML contains no detail on how it should be viewed.

          The same XML data can be used in a variety of display scenarios.

          As a result, XML allows for complete separation of data and presentation.

     

     


    Document Object Model is an acronym for Document Object Model. It establishes a protocol for document access and manipulation. The Document Object Model (DOM) is an HTML and XML document programming API. It specifies the logical structure of documents as well as how they are accessed and modified.

     

    One of the main goals of the Document Object Model as a W3C specification is to provide a basic programming interface that can be used in a broad range of environments and applications. Any programming language can use the Document Object Model.

     

    The XML Document Object Model (DOM) specifies a standard for accessing and manipulating XML data.

     

    What does XML DOM

    For an XML text, the XML DOM creates a tree-structure view.

     

    The DOM tree provides access to all components.

     

    We may change or remove their content, as well as add new elements. Nodes are the elements, as well as their content (text and attributes).

     

    Properties of DOM

    These are some typical DOM properties:

            x.nodeName - the name of x

            x.nodeValue - the value of x

            x.parentNode - the parent node of x

            x.childNodes - the child nodes of x

            x.attributes - the attributes nodes of x

    DOM Methods

            x.getElementsByTagName(name) - get all elements with a specified tag name

            x.appendChild(node) - insert a child node to x

            x.removeChild(node) - remove a child node from x

    SAX

    The XML-DEV mailing list-built SAX (Simple API for XML), an event-based sequential access parser API for XML documents. SAX is a method for reading data from an XML document that is an alternative to the Document Object Model's mechanism (DOM). Whereas the DOM works on the entire document, SAX parsers work on each piece of the XML document one at a time.

     

    Unlike DOM, SAX does not have a formal specification. The Java implementation of SAX is regarded as the de facto standard. SAX processes documents in a state-dependent manner, as opposed to DOM, which processes XML documents in a state-independent manner.

     

    Features

          There is no internal framework established.

          Clients have no idea what methods to call, so they simply bypass the API's methods and insert their own code inside.

          It's an event-based parser that functions similarly to a Java event handler.

     

    Advantages

    1) It is straightforward and memory-friendly.

    2) It is extremely fast and can handle large papers.

     

    Disadvantages

    1) The API is less intuitive since it is event-based.

    2) Because the data is fragmented, clients never have access to the entire image.

     

    Key takeaway:

  • Document Object Model is an acronym for Document Object Model.
  • It establishes a protocol for document access and manipulation.
  • The Document Object Model (DOM) is an HTML and XML document programming API.
  • SAX is a method for reading data from an XML document that is an alternative to the Document Object Model's mechanism.
  • SAX processes documents in a state-dependent manner, as opposed to DOM, which processes XML documents in a state-independent manner.
  •  

     


    DHTML stands for Dynamic HTML and is not to be confused with HTML. Some versions of Netscape Navigator and Internet Explorer higher than version 4.0 support dynamic HTML. The properties of HTML, JavaScript, CSS, and the DOM (Document Object Model, which is used to access individual elements of a document) are used to create DHTML, which aids in the creation of dynamic content.

     

    It is made up of HTML, CSS, JS, and the Document Object Model (DOM). To make improvements to settings, properties, and methods, DHTML employs the Dynamic object model. It also employs scripting and is influenced by previous programming patterns.

     

    After the entire page has been completely loaded or under a view operation, or otherwise static HTML pages on the same, DHTML allows various scripting languages in a web page to adjust their variables, which improve the effects, looks, and many other functions.

     

    When a page is accessed, the code within the page is analyzed on the web server, and the resulting HTML is sent to the client's web browser. DHTML is used to build interactive and animated web pages that are created in real-time, often known as dynamic web pages, so that when such a page is accessed, the code within the page is analyzed on the web server and the resulting HTML is sent to the client's web browser.

     

    Advantages of DHTML

          As opposed to other interactive media such as Flash or Shockwave, the files are smaller and download faster.

          It is backed by major browser companies including Microsoft and Netscape.

          Extremely adaptable and simple to modify.

          Viewers do not require any additional plug-ins to browse through DHTML-based web pages, nor do they require any additional specifications or software to view them.

     

    Disadvantages of DHTML

          Learning DHTML necessitates a number of prerequisites. For example, the designer should be familiar with HTML, CSS, and JS before beginning with DHTML, which is a lengthy and time-consuming process in and of itself.

          Different browsers have different implementations. As a result, if it worked in one browser, it may not operate the same way in another.

          Also, after becoming extremely functional, DHTML necessitates the use of a few costly tools and utilities. Dreamweaver, for example, is a DHTML text editor.

     

    Key takeaway:

  • DHTML stands for Dynamic HTML and is not to be confused with HTML.
  • DHTML is used to build interactive and animated web pages that are created in real-time, often known as dynamic web pages.
  •  

    References:

  • Herbert Schieldt, “The Complete Reference: Java”, McGraw Hill.
  • Hans Bergsten, “Java Server Pages”, SPD O’Reilly
  • Margaret Levine Young, “The Complete Reference Internet”, McGraw Hill.
  • Naughton, Schildt, “The Complete Reference JAVA2”, McGraw Hill.
  • Balagurusamy E, “Programming in JAVA”, McGraw Hill.
  • https://www.geeksforgeeks.org/
  • https://www.javatpoint.com/

  • Index
    Notes
    Highlighted
    Underlined
    :
    Browse by Topics
    :
    Notes
    Highlighted
    Underlined