Unit 2 Internet and web technology CSS report

Why learn HTML?
● It is a simple markup language. Its implementation is easy.
● It is used to create a website.
● Helps in developing fundamentals about web
programming.
● Boost professional career.
Supported Browsers:
● Google Chrome 93.0
● Firefox 92.0
● Internet Explorer 11.0

What is HTML?
● HTML stands for Hyper Text Markup Language
● HTML is a language for describing web pages
● A markup language is a set of markup tags
● The tags describe document content
● HTML documents contain HTML tags and plain text
● HTML documents are also called web pages

Features of HTML:
● It is easy to learn and easy to use.
● It is platform-independent.
● Images, videos, and audio can be added to a web page.
● Hypertext can be added to the text.
● It is a markup language.
Advantages:
● HTML is used to build websites.
● It is supported by all browsers.
● It can be integrated with other languages like CSS, JavaScript, etc.

HTML Tags
● HTML markup tags are usually called HTML tags
● HTML tags are keywords (tag names) surrounded by angle brackets like
● HTML tags normally come in pairs like <p>and </p>
● The first tag in a pair is the start tag, the second tag is the end tag
● The end tag is written like the start tag, with a forward slash before the tag name
● Start and end tags are also called opening tags and closing tags
● HTML markup tags are usually called HTML tags

Elements and Tags:
HTML uses predefined tags and elements which tell the browser how to properly
display the content. Remember to include closing tags. If omitted, the browser
applies the effect of the opening tag until the end of the page.

HTML page structure: The basic structure of an HTML page is laid out below. It
contains the essential building-block elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which all web pages are created

A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

EXAMPLE:-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines that this
document is an HTML5 document
● The <html> element is the root element of an
HTML page
● The <head> element contains meta information
about the HTML page
● The <title> element specifies a title for the HTML
page (which is shown in the browser's title bar or
in the page's tab)
● The <body> element defines the document's body,
and is a container for all the visible contents, such
as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
● The <h1> element defines a large heading

HTML Headings
● HTML headings are defined with the <h1> to <h6> tags.
● <h1> defines the most important heading. <h6> defines the
least important heading.
Example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h6>Heading 6</h6>

Horizontal rule:
❑ The <hr> tag which stands for the horizontal rule is used to define a thematic
break in an HTML page.
❑ The <hr> tag is an empty tag, and it does not require an end tag. It is basically
used to separate content.

HTML Paragraphs
● HTML paragraphs are defined with the <p> tag.
Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

2.This example explains the HTML <p> tag.
<!DOCTYPE html>
<html>
<body>
<p>A Computer Science portal for Student.</p>
<p>It contains well written articles.</p>
</body>
</html>

HTML Line Breaker
● Use the <br> tag if you want a line break (a new line)
without starting a new paragraph.
● The <br> element is an empty HTML element. It has no
end tag.
Example:
<p>This is <br> a para <br> graph with line breaks</p>

Align attribute: The <p> tag specifically supports the alignment attribute and
allows us to align our paragraphs in left, right, or center alignment.
Syntax:
<p align="value">
Example: This example explains the align attribute to align the content in the
<p> tag.
<!DOCTYPE html>
<html>
<body>
<p align="center">Hello students</p>
<p align="left">A Computer Science portal for students.</p>
<p align="right">It contains well written, well thought articles.</p>
</body>
</html>

HTML Formatting Elements
Formatting elements were designed to display special types of text:
∙ <b> - Bold text
∙ <strong> - Important text
∙ <i> - Italic text
∙ <em> - Emphasized text
∙ <mark> - Marked text
∙ <small> - Smaller text
∙ <del> - Deleted text
∙ <ins> - Inserted text
∙ <sub> - Subscript text
∙ <sup> - Superscript text

<!DOCTYPE html>
<html>
<body>
<h2>Welcome To Sistec</h2>

<strong>Hello Students</strong>
<br>

<small>Hello Students</small>
<br>

<mark>Hello Students</mark>
</body>
</html>

Background Color
You can set the background color for HTML elements
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">What is Computer</h1>
<p style="background-color:Tomato;">
a device, usually electronic, that processes data according to a set of instructions.
The digital computer stores data in discrete units and performs arithmetical and
logical operations at very high speed.
</p>
</body><html>
OUTPUT

Text Color
You can set the color of text:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Welcome to world of HTML</p>
<p style="color:MediumSeaGreen;">a device, usually electronic, that processes
data according to a set of instructions. The digital computer stores data in discrete
units and performs arithmetical and logical operations at very high speed.</p>
</body>
</html>

Border Color
You can set the color of borders:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>

HTML Links
● HTML links are defined with the <a> tag.
Syntax:
<a href="url">This is a link</a>
Example:

HTML Links - Use an Image as a Link
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;"></a>
</body>
</html>

HTML Lists
1. Unordered HTML List
● An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
1. Ordered HTML List
● An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
● The list items are marked with numbers.

<!DOCTYPE html>
<html>
<head>
<title>HTML ol tag</title>
</head>
<body>
<h1 style="color: green">Welcome to HTML
World</h1>
<h3>HTML ol tag</h3>
<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>type attribute</p>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>SAGAR GROUP</title>
</head>
<body>
<h2>Welcome To SISTEC</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical
Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>
</html>

HTML span Tag
The HTML span element is a generic inline container for inline elements and
content. It is used to group elements for styling purposes (by using the class or id
attributes), A better way to use it when no other semantic element is available.
The span tag is a paired tag means it has both open(<) and closing (>) tags, and it
is mandatory to close the tag. The span tag is used for the grouping of inline
elements & this tag does not make any visual change by itself. span is very similar
to the div tag, but div is a block-level tag and span is an inline tag.
Syntax:
<span class="">Some Text</span>
Attribute: This tag accept all the Global attribute and Event Attributes

<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello
World</span> element inside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and
only takes up as much width as necessary.</p>
</body>
</html>
OUTPUT

HTML | Div Tag
The div tag is known as Division tag. The div tag is used in HTML to make
divisions of content in the web page like (text, images, header, footer, navigation
bar, etc). Div tag has both open(<div>) and closing (</div>) tag and it is mandatory
to close the tag. The Div is the most usable tag in web development because it helps
us to separate out data in the web page and we can create a particular section for
particular data or function in the web pages.
✔ Div tag is Block level tag
✔ It is a generic container tag
✔ It is used to the group of various tags of HTML so that sections can be created
and style can be applied to them.
As we know Div tag is block-level tag in this example div tag contain entire width.
It will be displayed div tag each time on a new line, not on the same line.

The <div> element is often used as a container for other HTML elements. The
<div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of
content:

<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>
</div>
</body>
</html>
OUTPUT

The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a
part of a document.
The <span> element has no required attributes, but style, class and id are common.
When used together with CSS, the <span> element can be used to style parts of the
text:

<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
</body>
</html> OUTPUT

HTML Comment Tags
● Comments can be inserted into the HTML code to make it
more readable and understandable.
● Comments are ignored by the browser and are not displayed.
● You can add comments to your HTML source by using the
following syntax:
Example:

HTML Image
● HTML images are defined with the <img> tag.
● The tag is empty, which means that it contains attributes only,
and has no closing tag.
Example:
<img src="url" alt="some_text">
○ src - Specifies the path to the image
○ alt - Specifies an alternate text for the image

HTML Video
● The HTML <video> element is used to show a video on a web page.
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML Audio
● The <audio> tag is used to embed sound content in a document, such
as music or other audio streams
Example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>

<video width="320" height="240" controls>
<source src="C:UsersKIRANDesktophtmlNew folder6804117-
uhd_4096_2160_25fps.mp4.crdownload" type="video/mp4">
Your browser does not support the video tag.
</video>
Common Video Formats:
● MP4 (video/mp4): The most widely supported format across all modern browsers.
● WebM (video/webm): Supported by most browsers (particularly open-source ones
like Chrome and Firefox).
● Ogg (video/ogg): Supported by many browsers, especially open-source ones.
Autoplay and Loop:
You can add additional attributes to customize the video behavior:
● autoplay: Automatically plays the video when the page loads.
● loop: Loops the video indefinitely, replaying it after it ends.
● muted: Starts the video with the sound muted.
● poster: Defines an image to display before the video starts (a placeholder or
preview image).

<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Supported Audio Formats:
● MP3 (audio/mpeg): Widely supported across all modern browsers.
● OGG (audio/ogg): Supported by most browsers, especially open-source ones
like Firefox.
● WAV (audio/wav): Uncompressed audio format, which may be larger in file size.
Autoplay and Loop:
You can add additional attributes to customize the behavior of the audio element:
● autoplay: Automatically starts playing the audio when the page loads.
● loop: Repeats the audio file indefinitely.

HTML IFrames
● An iframe is used to display a web page within a web page.
● Syntax for adding an iframe:
<iframe src="URL"></iframe>
● The URL points to the location of the separate page.
Example:
<iframe src="link" height="200" width="300" title="Iframe
Example"></iframe>

The <iframe> (short for inline frame) is a modern
HTML element used to embed another HTML
document or external content (such as videos, maps,
or other web pages) within a current webpage. It is
still widely used and supported in HTML5.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-
in-picture" allowfullscreen>
</iframe>
The <frame> element was used in older versions
of HTML (primarily in HTML 4) to define a part of
a webpage that could load an external document.
It was used with a <frameset> element to divide
the browser window into multiple sections, each
displaying different documents.
<frameset cols="50%,50%">
<frame src="left.html">
<frame src="right.html">
</frameset>

Aspect <frame> <iframe>
Usage Used in <frameset> to split the browser
window into multiple sections.
Embeds content inline within a webpage.
HTML Version Used in HTML 4, now deprecated in HTML5. Supported in HTML5 and widely used.
Content Source Loads an entire external HTML document. Loads external content (HTML, videos, maps, etc.) into
a webpage.
Flexibility Less flexible, limited to layout purposes. Highly flexible and commonly used for embedding
content.
Styling/Behavior Hard to style and problematic for usability. Can be styled easily and integrates seamlessly.
Deprecation Status Deprecated in HTML5. Fully supported in modern web development.
Usage Frames were difficult to style and maintain.
Navigation and user experience could
become confusing.
Search engines had trouble indexing content
inside frames.
Embedding YouTube videos.
Displaying Google Maps.
Embedding external web pages or content from third-
party sources.

HTML Table
● Tables are defined with the <table> tag
● <th> tag sets off the table header
● A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag)
Example:

<table border="1">
<caption>Student Grades</caption>
<thead> <tr> <th rowspan="2">Name</th> <th colspan="2">Grades</th></tr>
<tr> <th>Math</th> <th>Science</th> </tr>
</thead> <tbody> <tr> <td>John</td> <td>85</td> <td>90</td> </tr>
<tr> <td>Jane</td> <td>92</td> <td>88</td> </tr> </tbody>
<tfoot><tr> <td colspan="3">End of Grades Report</td> </tr>
</tfoot> </table>

HTML Forms
● An HTML form is used to collect user input. The user input is
most often sent to a server for processing.
● The <form> element is used to create the HTML forms
● The <input> element is the most used form element.
Example:

Key Elements Used in the Form:
1. Text Input (<input type="text">): Used for the username field.
2. Password Input (<input type="password">): Used for entering the password securely.
3. Email Input (<input type="email">): For entering the user’s email address.
4. Telephone Input (<input type="tel">): To enter a phone number.
5. Radio Button (<input type="radio">): Allows the user to select a gender option.
6. Date Input (<input type="date">): For selecting the user’s date of birth.
7. Textarea (<textarea>): A multi-line text box for entering the address.
8. Dropdown (<select>): A list of countries from which the user can choose.
9. Checkbox (<input type="checkbox">): Multiple checkboxes for hobbies and agreement to
terms.
10. File Upload (<input type="file">): Allows the user to upload a profile picture.
11. Hidden Field (<input type="hidden">): Sends hidden data like userID that the user doesn’t see.
12. Submit Button (<button type="submit">): Submits the form when clicked.

XHTML (Extensible Hypertext Markup Language)
XHTML (Extensible Hypertext Markup Language) is a stricter, XML-based version
of HTML. It was introduced to ensure that web pages are well-formed and follow
more rigid rules compared to HTML, aiming to improve interoperability with other
systems and future technologies.
XHTML is similar to HTML, but with stricter syntax and requirements based on
XML (Extensible Markup Language).
XHTML vs. HTML5:
● HTML5 has largely replaced XHTML due to its more forgiving syntax and broader support for new web technologies like audio,
video, and canvas. HTML5 incorporates many of the advantages of XHTML (e.g., better structure and semantic tags) while
allowing for more flexible, less strict syntax rules.
● XHTML is useful if you need strict XML compliance, such as for applications that rely on XML parsing, but HTML5 is generally
more practical for most web development today.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My First XHTML Page</title>
</head>
<body>
<h1>Welcome to XHTML!</h1>
<p>This is a paragraph in XHTML. It follows stricter rules compared to
HTML.</p>
<img src="image.jpg" alt="A description of the image" />
<br />
<a href="https://www.example.com">This is a link</a>
</body>
</html>

Unit 2 Internet and web technology CSS report

More Related Content

Similar to Unit 2 Internet and web technology CSS report

Recently uploaded

Unit 2 Internet and web technology CSS report

Editor's Notes