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)
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> | 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:
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:
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:
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:
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.
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:
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:
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:
References:
