0% found this document useful (0 votes)
8 views10 pages

HTML

Uploaded by

Rahul suthar
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
0% found this document useful (0 votes)
8 views10 pages

HTML

Uploaded by

Rahul suthar
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/ 10

UBMITTED BY : RAHUL SUTHAR S/O GIRDHARI LAL SUTHAR

SUBMITTED TO : PRIYA KUMAWAT

Basics of HTML
Lesson 1
Building Your First Web Page

Before we begin our journey to learn how to build websites with HTML and CSS, it is
important to understand the differences between the two languages, the syntax of each
language, and some common terminology.
What Are HTML & CSS?
 HTML, HyperText Markup Language, gives content structure and meaning by
defining that content as, for example, headings, paragraphs, or images.
 CSS, or Cascading Style Sheets, is a presentation language created to style the
appearance of content—using, for example, fonts or colors.
 As a rule, HTML will always represent content, and CSS will always represent the
appearance of that content.
 With this understanding of the difference between HTML and CSS, let’s dive into
HTML in more detail.
Example Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
Understanding Common HTML Terms

 Elements
 Elements are designators that define the structure and content of objects
within a page. Some of the more frequently used elements include multiple levels
of headings and paragraphs, the list goes on to include
the <a>, <div>, <span>, <strong>, and <em>elements, and many more.
 Elements are identified by the use of less-than and greater-than angle brackets, < >,
surrounding the element name.
Tags and Attributes
 An opening tag marks the beginning of an element. It consists of a less-than sign
followed by an element’s name, and then ends with a greater-than sign; for
example,<div>.
 A closing tag marks the end of an element. It consists of a less-than sign
followed by a forward slash and the element’s name, and then ends with a
greater-than sign; for example, </div>.
 The content that falls between the opening and closing tags is the content of that
element.
 Attributes are properties used to provide additional information about an
element.
 Attributes are defined within the opening tag, after an element’s name. Generally
attributes include a name and a value. The format for these attributes consists of
the attribute name followed by an equals sign and then a quoted attribute value.
For example, an <a> element including an href attribute would look like the
following:

<a href=“http://www.google.com”> Google </a>


Format
Setting Up the HTML Document Structure
 HTML documents are plain text documents saved with an .html file extension
rather than a .txt file extension. To begin writing HTML, you first need a plain
text editor that you are comfortable using.
 All HTML documents have a required structure that includes the following
declaration and elements: <!DOCTYPE html>, <html>, <head>, and <body>.
 Inside the <html> element, the <head> element identifies the top of the
document, including any metadata (accompanying information about the page).
The content inside the <head> element is not displayed on the web page itself.
Instead, it may include the document title (which is displayed on the title bar in
the browser window), links to any external files, or any other beneficial
metadata.
 All of the visible content within the web page will fall within
the <body> element.
Example Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
THANKS

You might also like