0% found this document useful (0 votes)
68 views16 pages

Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by

The document discusses HTML structure and tags. It covers: 1) The basic structure of an HTML document with <html>, <head>, and <body> tags. HTML elements are nested and have opening and closing tags. 2) Formatting HTML code for readability. Block elements start on new lines and are indented. 3) An example basic HTML page with <title>, <h1>, and <p> tags to demonstrate the structure.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
68 views16 pages

Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by

The document discusses HTML structure and tags. It covers: 1) The basic structure of an HTML document with <html>, <head>, and <body> tags. HTML elements are nested and have opening and closing tags. 2) Formatting HTML code for readability. Block elements start on new lines and are indented. 3) An example basic HTML page with <title>, <h1>, and <p> tags to demonstrate the structure.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Prof. Varsha Tank (IT/ICT Dept.

-
Presented by :
LJIET)
UNIT – 2
HTML AND CSS – cont.
Topics to be covered
 HTML Structure
 HTML Code Formatting
 First HTML page
 First HTML Page: Tags
 First HTML Page: Header
 First HTML Page: Body
 Basic HTML Tags
HTML Structure
 HTML is comprised of “elements” and “tags”
§ Begins with <html> and ends with </html>

 Elements (tags) are nested one inside another:

 Tags have attributes:

 HTML describes structure using two main sections:


<head> and <body>
HTML Code Formatting
 The HTML source code should be formatted to
increase readability and facilitate debugging.
§ Every block element should start on a new line.
§ Every nested (block) element should be indented.
§ Browsers ignore multiple whitespaces in the page source, so
formatting is harmless.
 For performance reasons, formatting can be
sacrificed
First HTML page
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>
First HTML Page: Tags

An HTML element consists of an opening tag, a closing tag and the content inside.
First HTML Page: Header
First HTML Page: Body
Basic HTML Tags

 <a> for link
 <b> to make bold text
 <strong> for bold text with emphasys
 <body> main HTML part
 <br> for break
 <div> it is a division or part of an HTML document
 <h1>... for titles
 <i> to make an italic text
 <img> for images in document
 <ol> is an ordered list, <ul> for an unordered list
 <li> is a list item in bulleted (ordered list)
 <p> for paragraph
 <span> to style part of text
HTML Elements
 An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
 The HTML element is everything from the start tag to the end tag:
 <h1>My First Heading</h1>
 <p>My first paragraph.</p>
 Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end
tag!

tart tag Element content End tag


<h1> My First Heading </h1>
<p> My first </p>
paragraph.
<br> none none
HTML attributes
HTML attributes provide additional information about HTML
elements.
 All HTML elements can have attributes

 Attributes provide additional information about elements

 Attributes are always specified in the start tag

 Attributes usually come in name/value pairs


like: name="value“

 The <a> tag defines a hyperlink. The href attribute


specifies the URL of the page the link goes to:

<a href="https://www.google.com">google homepage</a>


HTML comments
 Comment is a piece of code which is ignored by any
web browser. It is a good practice to add comments into
your HTML code, especially in complex documents, to
indicate sections of a document, and any other notes to
anyone looking at the code. Comments help you and
others understand your code and increases code
readability.

 HTML comments are placed in between <!-- ... --> tags.


So, any content placed with-in <!-- ... --> tags will be
treated as comment and will be completely ignored by
the browser.
Headings

§ Headings are important because search engines use


the headings to index the structure and content of
your web pages.
<h1> text </h1> -- largest of the six
<h2> text </h2>
<h3> text </h3>
<h4> text </h4>
<h5> text </h5>
<h6> text </h6> -- smallest of the six

align="position" --left (default), center or right


<P> and <center> tag

You might also like