Web Programming HTML Basics

WEB PROGRAMMING
HTML BASICS
LECTURE 3
What is HTML?
• HTML is a markup language
for describing web documents (web pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document
content
With HTML you can create your own Web
site.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
This is my first page
</body>
</html>
Example Explained
• The DOCTYPE declaration defines the document type to

be HTML
• The text between <html> and </html> describes an
HTML document
• The text between <head> and </head> provides
information about the document
• The text between <title> and </title> provides a title
for the document
• The text between <body> and </body> describes the
visible page content
HTML Tags
• HTML tags are keywords (tag names) surrounded
by angle brackets:
• <tagname>content</tagname>
• 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, but with
a slash before the tag name
• The start tag is often called the opening tag. The
end tag is often called the closing tag.
Web Browsers
• The purpose of a web browser (Chrome, IE,
Firefox, Safari) is to read HTML documents and
display them.
• The browser does not display the HTML tags, but
uses them to determine how to display the
document.
“Only the <body> area (the white area) is displayed

by the browser.”
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration helps the
browser to display a web page correctly.
• There are different document types on the
web.
• To display a document correctly, the browser
must know both type and version.
• The doctype declaration is not case sensitive.
All cases are acceptable:
Document Type Definition
• Because multiple versions and types of HTML and
XHTML exist, the W3C recommends identifying the
type of markup language used in a web page
document with a Document Type Definition (DTD).
• The DTD identifies the version of HTML contained in
your document.
• The DTD statement, commonly called a doctype
statement, is the first line of a web page document.
The DTD for HTML5 is:
• <!DOCTYPE html>
The <!DOCTYPE> Declaration
• <!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
HTML Headings
HTML headings are defined with
the <h1> to <h6> tags:
<h1>This is a heading</h1>
HTML Paragraphs
• HTML paragraphs are defined with
the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Line Break Element
• The line break element causes the browser to
advance to the next line before displaying the
next element or portion of text on a web
page.
• The line break tag is not coded as a pair of
opening and closing tags. It is a stand-alone,
or void element, empty and is coded as <br>.
Blockquote Element
• In addition to organizing text in paragraphs and
headings,
• sometimes you need to add a quotation to a web
page.
• The blockquote element is used to display a block
of quoted text in a special way—indented from
both the left and right margins.
• A block of indented text begins with a <blockquote>
• tag and ends with a </blockquote> tag.
HTML Lists
• HTML can have Unordered Lists, Ordered Lists,
or Description Lists:
Unordered HTML List Ordered HTML List HTML Description

• The first item 1. The first item List
• The second item 2. The second item The first item
Description of item
• The third item 3. The third item The second item
Description of item
• The fourth item 4. The fourth item
Ordered HTML Lists - The Type Attribute
• A type attribute can be added to an ordered

list, to define the type of the marker:
type="1" The list items will be numbered with
numbers (default)
type="A" The list items will be numbered with
uppercase letters
type="a" The list items will be numbered with
lowercase letters
type="I" The list items will be numbered with
uppercase roman numbers
type="i" The list items will be numbered with
lowercase roman numbers
HTML Description Lists
• A description list, is a list of terms, with a
description of each term.
• The <dl> tag defines a description list.
• The <dt> tag defines the term (name), and
the <dd> tag defines the data (description).
Description lists begin with the <dl> tag and end
with the </dl> tag. Each term or name in the list
begins with the <dt> tag and ends with the
</dt> tag. Each description begins with the <dd>
tag and ends with the </dd> tag.
Attribute of OL
• The start attribute is useful when you need a
list to begin with an integer value other than
1 (for example, start="10").
• Use the new HTML5 reversed attribute (set
reversed="reversed") to configure the list
markers to display in descending order.
Anchor Element
• Use the anchor element to specify a hyperlink, often
referred to as a link, to another web page or file that you
want to display.
• Each anchor element begins with an <a> tag and ends with a
</a> tag.
• The opening and closing anchor tags surround the text to
click
• to perform the hyperlink. Use the href attribute to configure
the hyperlink reference, which identifies the name and
location of the file to access.
• <a href=“#”>click here</a>
IMAGE
• The image element configures graphics on a web
page. These graphics can be photographs, banners,
company logos, navigation buttons, and so on; you are
limited only by your creativity and imagination.
• The image element is a void element and is not coded
as a pair of opening and closing tags. The following
code example configures an image named logo.gif,
which is located in the same folder as the web page:
• <img src="logo.gif" height="200" width="500" alt="My
Company Name">
IMG Attribute
• The src attribute specifies the file name of the image. The alt
attribute provides a text replacement, typically a text
description, of the image.
• The browser reserves the correct amount of space for your
image if you use the height and width attributes with values
either equal to or approximately the size of the image.
• Provide accurate values for the height and width of the image
to retain the image’s aspect ratio which is the proportional
relationship between the width and height of an image.
• The image could be skewed or distorted by the browser if you
provide inaccurate values for the image height and/or width.

Web Programming HTML Basics

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming HTML Basics

Uploaded by

Copyright:

Available Formats

WEB PROGRAMMING

• The DOCTYPE declaration defines the document type to

“Only the <body> area (the white area) is displayed

Unordered HTML List Ordered HTML List HTML Description

• A type attribute can be added to an ordered

You might also like