web tecnology -unit 1

SRI SATHYA SAAI ARTS AND SCIENCE COLLEGE FOR WOMEN – PASAR
22UCSCC53: WEB TECHNOLOGY Class : III Bsc(cs)
Unit I : Structuring Documents for the Web
Introducing HTML and XHTML, Basic Text Formatting, Presentational Elements, Phrase
Elements, Lists, Editing Text, Core Elements and Attributes, Attribute Groups. Links and
Navigation: Basic Links, Creating Links with the Element, Advanced E- mail Links. Images,
Audio, and Video: Adding Images Using the <img> Element, Using Images as Links Image Maps,
Choosing the Right Image Format, Adding Flash, Video and Audio to your web pages
Basic HTML concepts:
1. Tags: HTML uses tags to define elements, which are represented by a less-than
symbol (<) followed by the tag name and a greater-than symbol (>). Tags usually
come in pairs, with the opening tag preceding the content and the closing tag
following the content.
2. Elements: HTML elements represent the structure and content of a web page,
such as headings, paragraphs, images, links, forms, tables, and more.
3. Attributes: HTML elements can have attributes, which provide additional

information about the element, such as the source of an image or the destination of a
link.
4. Semantic meaning: HTML elements have semantic meaning, which means that
they convey meaning to search engines, screen readers, and other machines,
improving accessibility and search engine optimization (SEO).
Basic HTML structure:
1. Document type declaration: <!DOCTYPE html>
2. HTML element: <html>
3. Head element: <head> (contains metadata, title, and links to external files)
4. Body element: <body> (contains the visible content of the web page)
Common HTML tags:
1. Headings: <h1>, <h2>, <h3>, ...
2. Paragraphs: <p>
3. Links: <a>
4. Images: <img>
5. Lists: <ul>, <ol>, <li>
6. Emphasis: <b>, <i>, <u>
7. Containers: <div>, <span>
HTML is a fundamental technology for building websites and web applications, and
is used in conjunction with CSS (Cascading Style Sheets) and JavaScript to create
dynamic and interactive web experiences.
Introduction to XHTML
XHTML (Extensible Hypertext Markup Language) is a markup language that

combines HTML and XML (Extensible Markup Language) features. It was
introduced in 2000 to provide a more structured and standardized way of writing
HTML code.
Key features of XHTML:
1. XML syntax: XHTML uses XML syntax, which means tags must be properly
nested, and all tags must be closed.
2. Well-formed documents: XHTML documents must be well-formed, meaning they

must conform to the XML syntax rules.
3. Strict syntax: XHTML has a stricter syntax than HTML, with no room for errors
or omitting closing tags.
4. Modularization: XHTML is modular, allowing developers to use modules to

create customized markup languages.
5. XML namespace: XHTML uses the XML namespace, which allows developers to
mix XHTML with other XML languages.
Benefits of XHTML
1. Improved syntax: XHTML's strict syntax helps reduce errors and makes code
easier to maintain.
2. Better accessibility: XHTML's structured approach improves accessibility for

screen readers and other assistive technologies.
3. Enhanced search engine optimization (SEO): XHTML's clean code and proper
structure can improve search engine rankings.
4. Compatibility: XHTML documents can be parsed by XML parsers, making them

more versatile.
Differences between HTML and XHTML:

1. Syntax: XHTML uses XML syntax, while HTML uses a more relaxed syntax.
2. Tags: XHTML requires all tags to be closed, while HTML allows some tags to be
omitted.
3. Doctype: XHTML requires a specific doctype declaration, while HTML has a

more flexible doctype declaration.
XHTML has several versions, including:
1. XHTML 1.0
2. XHTML 1.1
3. XHTML 2.0 (never widely adopted)
4. XHTML5 (a variant of HTML5)
While XHTML was widely used in the early 2000s, it has largely been
replaced by HTML5, which offers more flexibility and features.
However, XHTML's influence can still be seen in modern web development,

and its principles continue to shape the way we write markup code.
Basic text formatting
Basic text formatting refers to the ways in which you can visually present text to
make it more readable, organized, and visually appealing. Here are some common
basic text formatting techniques:
1. Font styles: Bold, Italic, Underline, Strikethrough
2. Font sizes: Increasing or decreasing font size to draw attention or indicate

hierarchy
3. Alignment: Left, Center, Right, Justified alignment to arrange text
4. Line spacing: Adjusting the space between lines to improve readability
5. Indentation: Adding space before the first line of a paragraph to create a visual
offset
6. Color: Changing text color to convey meaning, differentiate text, or add visual
interest
7. Highlighting: Highlighting text with a background color to draw attention
8. Lists: Using bullet points or numbered lists to organize and present information
9. Headers: Using headings (H1, H2, H3, etc.) to create a hierarchy of information
10. Text decoration: Adding visual effects like shadows, outlines, or gradients to
text
These basic text formatting techniques can enhance the clarity, readability,
and overall visual appeal of text in various contexts, such as documents, web pages,
presentations, and more.
Basic text formatting in html
Basic text formatting in HTML can be achieved using various tags and attributes.
Here are some common examples:
1. Bold: <b>Bold text</b> or <strong>Bold text</strong>
2. Italic: <i>Italic text</i> or <em>Italic text</em>
3. Underline: <u>Underlined text</u> (note: <u> is not supported in HTML5)
4. Strikethrough: <s>Strikethrough text</s> or <strike>Strikethrough text</strike>
5. Font size:
- <font size="1">Smallest text</font> (1-7, with 1 being the smallest)
- <font size="+1">Larger text</font> (incremental size increase)
- <font size="-1">Smaller text</font> (incremental size decrease)
6. Font color: <font color="red">Colored text</font> (use hex codes or color

names)
7. Alignment:
- <p align="left">Left-aligned text</p>
- <p align="center">Centered text</p>
- <p align="right">Right-aligned text</p>
8. Headers: <h1>Heading 1</h1> , <h2>Heading 2</h2> , ... , <h6>Heading 6</h6>
9. Paragraphs: <p>Paragraph text</p>
10. Line break: <br> (used to insert a single line break)

Presentational elements
Presentational elements in HTML are tags that control the visual appearance and
layout of content on a web page. These elements were widely used in older versions
of HTML, but many have been deprecated or replaced by CSS styling in HTML5.
Here are some examples of presentational elements:
1. <font>: Controlled font face, size, and color.
2. <b>, <i>, <u>, <s>, <strike>: Used for bold, italic, underline, strikethrough, and
strike-through text.
3. <center>: Centered text and images.
4. <big>, <small>: Increased or decreased font size.
5. <sub>, <sup>: Created subscript and superscript text.
6. <hr>: Inserted a horizontal rule (line).
7. <br>: Inserted a line break.
8. <blink>: Caused text to blink (deprecated).
9. <marquee>: Created a scrolling text marquee (deprecated).
While presentational elements were once commonly used, they have several
limitations and drawbacks, such as:
- Lack of semantic meaning
- Inflexibility
- Difficulty in maintaining and updating
- Limited accessibility
In HTML5, it's recommended to use CSS styles instead of presentational elements to

control the layout and visual appearance of web pages. This approach provides more
flexibility, maintainability, and accessibility.
Pharse elements, list, editing text
Phrase elements, lists, and editing text are essential concepts in HTML:
Phrase Elements:
- Emphasize text with <em> or <i>
- Mark important text with <strong> or <b>
- Define abbreviations with <abbr>
- Indicate code with <code>
- Mark deleted text with <del>
- Indicate inserted text with <ins>
Lists:
- Unordered lists: <ul>, <li>
- Ordered lists: <ol>, <li>
- Definition lists: <dl>, <dt>, <dd>
Editing Text:
- <span>: Wrap text to apply styles or semantics
- <textarea>: Create a text input area
- <input type="text">: Create a single-line text input
- <label>: Associate text with a form control
These elements help structure and stylize text content, making it more readable
and accessible. By using phrase elements, lists, and editing text elements, you can
create clear and organized content for your website or web application.
Pharse elements
Phrase elements in HTML are used to add semantic meaning to text,

highlighting its importance, emphasis, or significance. Here are some common
phrase elements:
1. <em>: Emphasized text, typically displayed in italics.
2. <strong>: Important text, typically displayed in bold.
3. <b>: Bold text (deprecated in HTML5, use <strong> instead).

4. <i>: Italic text (deprecated in HTML5, use <em> instead).
5. <abbr>: Abbreviation, used to define an abbreviated term.
6. <code>: Code snippet, used to display programming code.
7. <del>: Deleted text, used to indicate text that has been removed.
8. <ins>: Inserted text, used to indicate text that has been added.
9. <mark>: Marked text, used to highlight important information.
10. <q>: Quotation, used to indicate a quote.
11. <cite>: Citation, used to reference a source.
12. <dfn>: Definition, used to define a term.
13. <kbd>: Keyboard input, used to indicate user input.
14. <samp>: Sample output, used to display sample output.
15. <var>: Variable, used to indicate a variable in a mathematical or programming

context.
These phrase elements help search engines, screen readers, and other machines
understand the meaning and context of text, improving accessibility and search
engine optimization (SEO).
LISTS , EDITING TEXT:
Lists and editing text are essential features in HTML:
Lists:
- Unordered Lists (<ul>):
- Use <li> elements to define list items
- No inherent order or numbering
- Ordered Lists (<ol>):
- Use <li> elements to define list items
- Automatically numbered
- Definition Lists (<dl>):
- Use <dt> elements to define terms

- Use <dd> elements to define definitions
Editing Text:
- <textarea>:
- Creates a text input area
- Allows users to enter multiple lines of text
- <input type="text">:
- Creates a single-line text input
- Used for form inputs
- <label>:
- Associates text with a form control
- Improves accessibility
Additionally, HTML provides various elements and attributes to edit and manipulate
text, such as:
- <del> and <ins>: Indicate deleted and inserted text
- <sub> and <sup>: Create subscript and superscript text
- <span>: Wrap text to apply styles or semantics
- <abbr>: Define abbreviations
- <dfn>: Define terms
These elements and attributes help create structured and meaningful content, making
it easier for users and machines to understand and interact with your text.
Core elements:
The core elements in HTML are the basic building blocks of a web page. They
are the essential elements that provide the structure and content of a webpage. Here
are some of the most common core elements:
1. <html>: The root element of the webpage.
2. <head>: Contains metadata about the webpage, such as the title, charset,
and links to external style sheets or scripts.
3. <title>: Sets the title of the webpage, displayed in the browser's title bar
and search engine results.
4. <body>: Contains the content of the webpage, such as text, images, and
other elements.
5. <p>: Defines a paragraph of text.
6. <img>: Adds an image to the webpage.
7. <a>: Creates a hyperlink to another webpage or email address.
8. <ul>, <ol>, and <li>: Create unordered and ordered lists.
9. <h1>, <h2>, <h3>, etc.: Define headings of different levels.
10. <div> and <span>: Generic containers for grouping elements or applying
styles.
These core elements are the foundation of HTML and are used to create the
basic structure and content of a webpage.
Attributes and attributes groups:
Attributes and attribute groups are used in HTML to provide additional
information about an element and its content. Attributes are added to the opening tag
of an element and consist of a name and value, separated by an equals sign (=).
Here are some common attributes and attribute groups:
1. Global attributes:
- id: Assigns a unique identifier to an element.
- class: Assigns one or more classes to an element.
- style: Inline styles for an element.
- title: Tooltip text for an element.
2. Hyperlink attributes:
- href: Specifies the link URL.
- target: Specifies the link target (e.g., _blank, _self).
3. Image attributes:
- src: Specifies the image URL.
- alt: Alternative text for the image.

- width and height: Specify the image dimensions.
4. Form attributes:
- name: Specifies the form element name.
- value: Specifies the form element value.
- placeholder: Specifies the placeholder text.
5. Event attributes:
- onclick: Specifies the click event handler.
- onmouseover: Specifies the mouseover event handler.
6. Accessibility attributes:
- aria-*: Specifies accessibility properties (e.g., aria-label, aria-hidden).
Attribute groups are used to categorize attributes based on their purpose or

functionality. Some common attribute groups include:
1. Universal attributes
2. Metadata attributes
3. Hyperlink attributes
4. Image attributes
5. Form attributes
6. Event attributes
7. Accessibility attributes
Using attributes and attribute groups effectively can enhance the functionality,
accessibility, and overall quality of your HTML code.
Simple program in html
Here is a simple HTML program that displays a heading, a paragraph, and a link:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Program</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML program.</p>
<p><a href="(link unavailable)">Visit Google</a></p>
</body>
</html>
Let me explain what each part of this code does:
- <!DOCTYPE html>: This is the document type declaration, which tells the
browser that the document is written in HTML5.
- <html>: This is the root element of the HTML document.
- <head>: This element contains metadata about the document, such as the title,
charset, and links to external stylesheets or scripts.
- <title>My First HTML Program</title>: This sets the title of the webpage, which
is displayed in the browser's title bar and search engine results.
- <body>: This element contains the content of the HTML document.
- <h1>Welcome to My Website</h1>: This is a heading element that displays the

text in a large font size.
- <p>This is my first HTML program.</p>: This is a paragraph element that

displays a block of text.
- <p><a href="(link unavailable)">Visit Google</a></p>: This is a paragraph
element that contains a link to Google's website.
- </html>: This is the closing tag of the root element.
Save this code in a file with an .html extension (e.g., myprogram.html) and open it
in a web browser to see the result
LINKS AND NAVIGATION:
HTML provides several elements and attributes for creating links and navigation
menus. Here are some of the most commonly used ones:
Links:
- <a> element: used to create a hyperlink to another webpage, email address, or a

specific section within a webpage.
- href attribute: specifies the link destination (e.g., href="(link unavailable)").
- target attribute: specifies how the linked document should be opened (e.g.,
target="_blank" for a new tab).
Example: <a href="(link unavailable)">Visit Example Website</a>
Navigation Menus:
- <nav> element: used to define a section of a webpage as a navigation menu.
- <ul>, <ol>, and <li> elements: used to create unordered, ordered, and list items,
respectively.
- <a> element within <li> elements: used to create links within the navigation
menu.
Example:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

web tecnology -unit 1

Uploaded by

Copyright:

Available Formats

You might also like

web tecnology -unit 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

web tecnology -unit 1

Uploaded by

Copyright:

Available Formats

SRI SATHYA SAAI ARTS AND SCIENCE COLLEGE FOR WOMEN – PASAR

22UCSCC53: WEB TECHNOLOGY Class : III Bsc(cs)

Unit I : Structuring Documents for the Web

Basic HTML concepts:

3. Attributes: HTML elements can have attributes, which provide additional

Basic HTML structure:

1. Document type declaration: <!DOCTYPE html>

2. HTML element: <html>

Common HTML tags:

1. Headings: <h1>, <h2>, <h3>, ...

6. Emphasis: <b>, <i>, <u>

7. Containers: <div>, <span>

XHTML (Extensible Hypertext Markup Language) is a markup language that

Key features of XHTML:

2. Well-formed documents: XHTML documents must be well-formed, meaning they

4. Modularization: XHTML is modular, allowing developers to use modules to

2. Better accessibility: XHTML's structured approach improves accessibility for

4. Compatibility: XHTML documents can be parsed by XML parsers, making them

Differences between HTML and XHTML:

3. Doctype: XHTML requires a specific doctype declaration, while HTML has a

XHTML has several versions, including:

3. XHTML 2.0 (never widely adopted)

4. XHTML5 (a variant of HTML5)

However, XHTML's influence can still be seen in modern web development,

Basic text formatting

1. Font styles: Bold, Italic, Underline, Strikethrough

2. Font sizes: Increasing or decreasing font size to draw attention or indicate

3. Alignment: Left, Center, Right, Justified alignment to arrange text

4. Line spacing: Adjusting the space between lines to improve readability

7. Highlighting: Highlighting text with a background color to draw attention

Basic text formatting in html

1. Bold: <b>Bold text</b> or <strong>Bold text</strong>

2. Italic: <i>Italic text</i> or <em>Italic text</em>

3. Underline: <u>Underlined text</u> (note: <u> is not supported in HTML5)

4. Strikethrough: <s>Strikethrough text</s> or <strike>Strikethrough text</strike>

- <font size="1">Smallest text</font> (1-7, with 1 being the smallest)

- <font size="+1">Larger text</font> (incremental size increase)

- <font size="-1">Smaller text</font> (incremental size decrease)

6. Font color: <font color="red">Colored text</font> (use hex codes or color

- <p align="left">Left-aligned text</p>

- <p align="center">Centered text</p>

- <p align="right">Right-aligned text</p>

8. Headers: <h1>Heading 1</h1> , <h2>Heading 2</h2> , ... , <h6>Heading 6</h6>

9. Paragraphs: <p>Paragraph text</p>

10. Line break: <br> (used to insert a single line break)

1. <font>: Controlled font face, size, and color.

3. <center>: Centered text and images.

4. <big>, <small>: Increased or decreased font size.

5. <sub>, <sup>: Created subscript and superscript text.

6. <hr>: Inserted a horizontal rule (line).

7. <br>: Inserted a line break.

8. <blink>: Caused text to blink (deprecated).

9. <marquee>: Created a scrolling text marquee (deprecated).

- Lack of semantic meaning

- Difficulty in maintaining and updating

In HTML5, it's recommended to use CSS styles instead of presentational elements to

Pharse elements, list, editing text

- Emphasize text with <em> or <i>

- Mark important text with <strong> or <b>