WEB TECHNOLOGY
CLASS:[Link].,(CS) SUB CODE:22SSBECS1
5-MARKS;
1. What is HTML, HTML tags, HTML Attributes?
HTML ;
HTML stands for Hyper Text Markup Language and is the language of the internet. It is
the standard text formatting language used for creating and displaying pages on the
Internet
HTML documents are made up of the elements and the tags that format it for proper
display on pages.
HTML tags;
We use HTML tags for placing the elements in the proper and appropriate format. Tags
use the symbols <, and > to set them apart from the HTML content.
The HTML tags need not be closed always. For example, in the case of images, the
closing tags are not required as <img> tag.
HTML Attributes;
Attributes are the properties that can be added to an HTML tag. These attributes
change the way the tag behaves or is displayed. For example, a <img> tag has an src
attribute, which you use to add the source from which the image should be displayed.
We add attributes right after the name of the HTML tag, inside the brackets. We can
only add the attributes to opening or self-closing tags, but never be in closing tags.
2. Explain the layout of HTML?
Ans. HTML layout represents how all the elements in the document are
arranged. It is a vital part of basic page design and is important for creating
a website to appear professional and attractive. Every website has a
specific layout to display content in a specific manner. The following HTML
elements are used to define the different parts of a webpage:
<header>: define a header for a document or a section
<nav>: defines a container for navigation links
<section>: it defines a section in a document
<article>: define an independent, self-contained article
<aside>: it defines content aside from the content
<footer>: define a footer for a document or a section
<details>: define additional details.
[Link] to insert an image in HTML?
Ans. Images can be inserted using an HTML page’s <img> tags. It is an empty tag with
only attributes and does not require a closing tag. The <img> tag must be used inside
<body>…</body> tag. The following parameters will be required to insert an image
using <img> tag
src attribute – It is used to add the path to the image (URL of the image).
alt attribute – It is for adding alternate text.
Width – To add the width of the image
Height – To add the height of the image
Example:
<img src=”img_pancakes.jpg” alt=”Blueberry Pancakes” width=”500″ height=”600″>
Below is the code to insert an image in an HTML page:
<!DOCTYPE html>
<html>
<head>
...
<\head>
<body>
...
<img src="URL"alt="add alttext"width="width"height">
...
<\body>
<\html>
[Link] Is The Full Form Of SGML?
The full form of SGML is Standard Generalized Markup Language.
SGML is a standard that defines how to specify the generalized markup languages for
various documents. It is not a document language in itself but rather a description
regarding how to define them. Thus, it’s metadata. It follows the idea that every
document has various semantic elements like their structure which one can describe
without any reference to how to display them. On the other hand, the actual display of
these docs may vary based on the output medium and preference of styles.
A theoretical example of SGML-based language is HTML. However, the browsers
cannot parse HTML 5 with the SGML standard due to some compatibility reasons.
SGML is based somewhat on earlier markup languages like GML. It later extended itself
into languages like XML (Extensible Markup Language) and HTML (HyperText Markup
Language).
Components of SGML Doc
An SGML document mainly consists of three components, and they are:
Document instance
Prolog
SGML Declaration
[Link] and Disadvantages of SGML?
Advantages;
One can recreate the SGML on the basis of document structure instead of appearance
characteristics. It is good because such characteristics may change over time.
The documents produced originally for print media can re-adapt into other media, like the
computer display screen.
A compiler of SGML can interpret any document easily by referencing its DTD (document
type definition). Thus, it becomes more portable.
The SGML standard supports all media types, and it can encode the entire structure of any
document.
It separates the content from its appearance.
The stylesheets with SGML make its content reusable for various purposes.
The file encoding that SGML offers can perform more formatting when compared to HTML.
SGML is much more in use compared to HTML because HTML provides capabilities for
coding visual representation, and it cannot structure the original information/data.
Due to ISO standards, many tools are available for SGML. Thus, it is well supported
currently.
Disadvantages of SGML
Coding software in SGML may be typical and complicated.
The tools in use with this standard are very expensive.
SGML may not have extensive use.
It needs special software for running and allowing the document to display.
Creating the DTDs requires exacting software engineering.
10-marks;
1. Explain about HTML - Head Element?
The HTML <head> element is a container for the following
elements: <title>, <style>, <meta>, <link>, <script>, and <base>.
The HTML <head> Element
The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and
other meta information.
The HTML <title> Element
The <title> element defines the title of the document. The title must be text-
only, and it is shown in the browser's title bar or in the page's tab.
The <title> element is required in HTML documents!
The content of a page title is very important for search engine optimization
(SEO)! The page title is used by search engine algorithms to decide the order
when listing pages in search results.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results
So, try to make the title as accurate and meaningful as possible!
A simple HTML document:
Example
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <style> Element
The <style> element is used to define style information for a single HTML page:
Example
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
[Link] about HTML Forms;
HTML Forms utilize the <form> element as a powerful tool to collect user input
through a variety of interactive controls.
~These controls range from text fields, numeric inputs, email fields, password fields,
to checkboxes, radio buttons, and submit buttons. In essence, an HTML Form serves
as a versatile container for numerous input elements, thereby enhancing user
interaction.
Syntax:
<form>
<!--form elements-->
</form>
Form Elements
The HTML <form> comprises several elements, each serving a unique purpose. For
instance, the <label> element is used to define labels for other <form> elements.
The <input> element, on the other hand, is versatile and can be used to capture
various types of input data such as text, password, email, and more, simply by altering
its type attribute. Now, let’s all the list of HTML Form Elements one by one:
Elements Descriptions
<label> It defines labels for <form> elements.
It is used to get input data from the form in various types such as text,
<input>
password, email, etc by changing its type.
It defines a clickable button to control other elements or execute a
<button>
functionality.
<select> It is used to create a drop-down list.
Elements Descriptions
<textarea> It is used to get input long text content.
It is used to draw a box around other form elements and group the related
<fieldset>
data.
<legend> It defines a caption for fieldset elements
<datalist> It is used to specify pre-defined list options for input controls.
<output> It displays the output of performed calculations.
<option> It is used to define options in a drop-down list.
<optgroup> It is used to define group-related options in a drop-down list.
Commonly Used Input Types in HTML Forms;
In HTML forms, various input types are used to collect different types of data from
users. Here are some commonly used input types:
<input type=”text”>
Input Type Description
<input type=”text“> Defines a one-line text input field
<input
Defines a password field
type=”password“>
Input Type Description
<input type=”submit“> Defines a submit button
<input type=”reset“> Defines a reset button
<input type=”radio“> Defines a radio button
<input type=”email“> Validates that the input is a valid email address.
<input Allows the user to enter a number. You can specify min, max,
type=”number“> and step attributes for range.
<input
Used for checkboxes where the user can select multiple options.
type=”checkbox“>
<input type=”date“> Allows the user to select a date from a calendar.
<input type=”time“> Allows the user to select a time.
<input type=”file“> Allows the user to select a file to upload.
[Link] is HTML document outline?
HTML document outline is a hierarchy of headings (h1-h6) inside a webpage which
describes the structure of that page. Each heading creates a level in the outline. A
heading represents a section of a webpage and leads the texts that follow it. The HTML
document outline begins with the highest ranking of heading and it goes downward and
it may include sub headings.
The outline of a web page is like the table of content of that page, though it is not visible
in the web page directly.
The following image is a sample HTML document outline-
1. Learn Web Development
1. Client side language
1. HTML
2. CSS
3. JavaScript
4. jQuery
2. Server side language
1. Programming language: PHP
2. Database:
3. MySQL
HTML document outline important;
HTML document outline has some benefits-
Screen reader and other accessible tools use this outline to obtain the structure of a web page
and provide this information to the visually impaired users to navigate the web page easily.
Search engines use outline of a page to understand its structure better.
Properly outlined webpage is easy to navigate from one section to other using keyboard.
Using HTML document outline allows you to use more than six levels of headings, actually as
many as you want.
It allows you to syndicate a section of a website to the other site (in HTML5). So, the
content of a web site becomes portable.
Rules of outlining an HTML document;
With the HTML5 outlining algorithm, you can create an HTML5 outline document.
When outlining a webpage using, remember the following points (it includes HTML
outline algorithm’s rules)-
Heading elements (h1 to h6) and sectioning elements (section, article, nav, and aside) are used
to outline a webpage.
Each sectioning element demarcates a separate section.
Separated sectioning elements create same level in the document outline no matter which
heading elements are used inside the sectioning elements. See the (a) diagram in the following
image-
Nested section creates a sub level under its parent. See the (b) diagram in the above image.
Each sectioning element has its own scope of heading (h1 – h6). That means a webpage may
have more than one h1 or other heading elements.
Body element is the root section which comprises all the remaining sections.
The first heading which is outside of any sectioning element is the heading of the body root
section.
Any sectioning element inside the body element or the other sectioning elements is the nested
section of the body or other sectioning elements respectively.
If there is more than one heading in a section, the first one is the heading of that section.