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
