Scribd
Upload
10 views23 pages

CSE326 Unit1

Uploaded by

shivam1440f
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views23 pages

CSE326 Unit1

Uploaded by

shivam1440f
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

CSE326

Internet Programming
Laboratory
Lecture #1

Parveen Kaur
1
2

Parveen Kaur, Lovely


Professional University

Outline
●Introduction
●HTML Document structure
●Types of tags
●Headings
●Paragraphs
●HTML main tag
●Comments
3

Parveen Kaur, Lovely


Professional University

Introduction
●HTML stands for Hyper Text Markup Language.
●It is a markup language.
●It is the basic building block of World Wide Web.
●It describes the structure of a web page.
●It consists of a series of elements.
●HTML was originally developed by Tim Berners-Lee in
1990. He is also known as the father of the web.
●HTML5 is the latest version of HTML.
4

Introduction
Parveen Kaur, Lovely
Professional University

● HyperText: simply means "Text within Text."


● A text has a link within it, is a hypertext.
● Whenever you click on a link which brings you to a new
webpage, you have clicked on a hypertext. HyperText is a
way to link two or more web pages (HTML documents) with
each other.
● Markup language: A markup language is a computer
language that is used to apply layout and formatting
conventions to a text document.
● Markup language makes text more interactive and dynamic.
It can turn text into images, tables, links, etc.
● Web Page: A web page is a document which is commonly
written in HTML and translated by a web browser.A web page
can be identified by entering an URL.
● A Web page can be of the static or dynamic type. With the
5

Parveen Kaur, Lovely

HTML Document Professional University

structure
●A markup tag is composed of a keyword surrounded
by angle brackets.
<tag_name></tag_name>
<html>
<head>
<title>…</title>
</head>
<body>
……..
</body>
</html>
6

Parveen Kaur, Lovely


Professional University

<!DOCTYPE html>
●This is a special declaration that helps the browser display
the page correctly by telling it the type of code we’re
writing (in this case it’s HTML5).
●It should appear once at the start of the document before
any other elements.
●This is a special element that doesn’t require a closing tag.
●This ensures that the web page is parsed the same way by
different web browsers.
<!DOCTYPE html>
7

Parveen Kaur, Lovely


Professional University

Types of tags
●Paired tags
○If any html tag has a separate opening and a
separate closing tag, then such html tag is known
as paired tag.
○<h1>content</h1>

●Unpaired tags
○If any html tag has both opening and closing tag in
a single tag, then such html tag is known as
unpaired tag.
○<br>, <hr>
Parveen Kaur, Lovely 8

Attributes Professional University

●attributes are the modifier of the HTML element.


●Each element or tag can have attributes, which defines the behaviour of
that element.
●Attributes should always be applied with start tag.
●The Attribute should always be applied with its name and value pair.
●The Attributes name and values are case sensitive.
● You can add multiple attributes in one HTML element, but need to give
space between two attributes.
●<body>
● <p style="height: 50px; color: blue">It will add style property in
element</p>
● <p style="color: red">It will change the color of content</p>
●</body>
Parveen Kaur, Lovely
Professional University 9

Element
●An element in HTML usually consist of a start tag <tag
name>, close tag </tag name> and content inserted
between them.
○Technically, an element is a collection of start tag,
attributes, end tag, content between them.
○ <h1>This is my first web page</h1>
●Void element: Elements does not have content and end
tag are known as Void elements or empty elements.
○These elements are also called as unpaired tag.
○<h1>This is my first <br> web page</h1>
●Nested HTML Elements: HTML can be nested, which
means an element can contain another element.
Parveen Kaur, Lovely
Professional University 10

Element
● For the default display and styling purpose in HTML, all the elements
are divided into two categories as: Block-level element and Inline
element.

● Block-level elements:
○ Provides structure of main part of web page, by dividing a page
into coherent blocks.
○ Always start with new line and takes the full width of web page,
from left to right.
○ <address>, <article>, <aside>, <blockquote>, <canvas>,
<dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>,
<footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>,
<nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>,
<table>, <tfoot>, <ul> and <video>.
Parveen Kaur, Lovely
Professional University 11

Element
●Inline elements:
○Differentiate the part of a given text and provide it a particular
function.
○Does not start with new line and take width as per requirement.
○The Inline elements are mostly used with other elements.
○<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>,
<button>, <cite>, <code>, <dfn>, <em>, <i>, <img>,
<input>, <kbd>, <label>, <map>, <object>, <q>, <samp>,
<script>, <select>, <small>, <span>, <strong>, <sub>,
<sup>, <textarea>, <time>, <tt>, <var>.
○<a href="https://www.javatpoint.com/html-tutorial">Click on
link</a>
Parveen Kaur, Lovely
Professional University 12

Difference between tag and an element

Tag:
●Any text written inside the angle brackets is a tag.
○<></>
●The text inside the angle brackets is just used to tell the browser
how to display or transform regular text located between the
opening tag and the closing tag.

Element:
●An element is an opening tag, a closing tag, and all the content
that is included between the two tags.
○<tag attribute=“”></tag >
Parveen Kaur, Lovely
Professional University 13

Root
●The <html> HTML element represents the root (top-level element)
of an HTML document, so it is also referred to as the root element.
All other elements must be descendants of this element.
<html>
<head>
<title>…</title>
</head>
<body>
……..
</body>
</html>
Parveen Kaur, Lovely
Professional University 14

Metadata
●Metadata is data (information) about data.
●Meta tags are used in html for metadata.
●<meta> tags always go inside the <head> element, and are
typically used to specify character set, page description, keywords,
author of the document, and viewport settings.
●Metadata will not be displayed on the page, but is machine
parsable.
●Metadata is used by browsers (how to display content or reload
page), search engines (keywords), and other web services.

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">
Parveen Kaur, Lovely
Professional University 15

Horizontal Rules
●The <hr> tag defines a thematic break in an HTML page.
●It is also called as the horizontal rule.
○<hr>

<html>
<body>
<h1>An example of the hr tag in HTML</h1>
<hr>
<p>Welcome to the page.</p>
<hr>
<p>Below are the contents.</p>
</body>
</html>
Parveen Kaur, Lovely
Professional University 16

Line Breaks
●The <br> tag inserts a single line break.
○<br>
●It is generally used in poem or address where the division of
line is necessary

<html>
<body>
<h1>An example of the hr tag in HTML</h1>
<p>Welcome to the page <br> here is the
line break.</p>
<p>Below are the contents.</p>
</body>
</html>
Parveen Kaur, Lovely 17
Professional University

Headings and Paragraphs


●The <h1> to <h6> tags are used to define HTML
headings.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

●The <p> tag defines the paragraph


<p>This is some text in a paragraph.</p>
Parveen Kaur, Lovely 18
Professional University

Citation
● The <cite> HTML element is used to mark up the title of a cited
creative work.
○ A book
○ A research paper
○ An essay
○ A poem
○ A musical score
○ A song

● The text in the <cite> element usually renders in italic.


○ <p><cite>The Scream</cite> by Edward Munch. Painted in
1893.</p>
Parveen Kaur, Lovely 19
Professional University

Quotation
●The Quotation elements in HTML are used to insert quoted
texts in a web page, that is the portion of texts different
from the normal texts in the web page.

○The <q> tag defines a short quotation. <q> </q>


■<p>Hello! <q>”How are you?”</q> hope you are
fine</p>

○<blockquote> for long quotations.


○<blockquote> </blockquote>
Parveen Kaur, Lovely 20
Professional University

Definition
●The <dfn> tag stands for the "definition element", and it
specifies a term that is going to be defined within the
content.

●The nearest parent of the <dfn> tag must also contain the
definition/explanation for the term.
○<p><dfn>HTML</dfn> is the standard markup
language for creating web pages.</p>
21

Parveen Kaur, Lovely


Professional University

HTML main tag and Comments


●The <main> tag specifies the main content of a
document.
○There must not be more than one <main> element in a
document.

●Comments
●Comments are some text or code written in your code to
give an explanation about the code.
●Comments are not visible to the user.
●Anything written between these tags will be ignored by the
browser.
○ <!-- This is a comment -->
22

Parveen Kaur, Lovely


Professional University

References
● https://www.w3schools.com/html/html_headings.asp
● https://www.w3schools.com/tags/tag_p.asp
● https://www.w3schools.com/tags/tag_main.asp
● https://www.w3schools.com/tags/tag_comment.asp#:~:text=HTML%20Tag&text=T
he%20comment%20tag%20is%20used,code%20at%20a%20later%20date
.
23

Parveen Kaur, Lovely


Professional University

Thank you

You might also like