Scribd
Upload
3 views42 pages

1.1 Introduction to HTML

Uploaded by

hrrs.pbt
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
3 views42 pages

1.1 Introduction to HTML

Uploaded by

hrrs.pbt
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/ 42

Introduction to HTML

What is HTML?
Hypertext Markup Language (HTML) is a
standard markup language for
documents designed to be displayed in
internet browsers.
In making HTML, usually accompanied
by technologies such as CSS for styling
and Javascript for scripting.
TML 5 Document Declaration

TML headers to include external


titles, meta tags and CSS

All content inside <body> is visible in


internet browser
HTML Element

An HTML element is defined with an opening tag,


the content in it, and ends with a closing tag.
HTML Element

An HTML element can contain other HTML


elements. These are called nested elements.
HTML Heading

HTML heading is for titles or subtitles that


you want to display on a webpage.
Paragraph, Link and Image
Never skip the end tag
Unpaired Tag

Unpaired tags are single tags with no closing tag. These tags are also called
Singular Tags. These are also called non-container tags because they do not
contain any content.

It is recommended to close the unpaired/singular tags also. But unfortunately, we


do not have the closing tag for those. So, an unpaired tag is closed after adding a
slash(/) just before the greater than > sign. For example: <br />.
HTML is not Case Sensitive

The HTML standard does not require lowercase tags,


but recommends lowercase in HTML
HTML Attribute
HTML Attribute
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 Href Attribute

The <a> tag defines a hyperlink. The href


attribute specifies the URL of the page the link
goes
The src Attribute

The <img> tag is used to embed an image in


an HTML page. The src attribute specifies
the path to the image to be displayed:
Width and Height Attribute

The <img> tag should also contain the width and height
attributes, which specifies the width and height of the
image (in pixels):
Alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image,
if the image for some reason cannot be displayed. This can be due to slow
connection, or an error in the src attribute, or if the user uses a screen reader.
We Suggest : Always
quote attribute value
Good
The HTML standard does not require
quotes around attribute values. However,
W3C recommends quotes in HTML, and
Bad demands quotes for stricter document
types like XHTML.
HTML Formatting
HTML Formatting
HTML contains several elements for
defining text with a special meaning.
HTML Comment
HTML Comment

HTML comments are not displayed in the browser, but


they can help document your HTML source code.
HTML List
HTML List
Ordered HTML List
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag. The
list items will be marked with numbers by
default:
Unordered HTML List
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag. The list
items will be marked with bullets (small black
circles) by default:
Nested List
Description List

HTML also supports description lists. A description list is


a list of terms, with a description of each term.The <dl>
tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term
HTML Form
HTML Form
The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>
The <input> Element
An <input> element can be displayed in many ways, depending on the type attribute.
The <select> Element
The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if you omit the
name attribute, no data from the drop-down list will be submitted).
The id attribute is needed to associate the drop-down list with a label.
The <textarea> Element
The <textarea> tag defines a multi-line text input control.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font
(usually Courier).
The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).
The <button> Element
The <button> tag defines a clickable button.
Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That
is not possible with a button created with the <input> element!
Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it
is.
HTML File Paths
Absolute vs Relative Path
Which is the best practice?
Absolute Path
An absolute file path is the full URL to a file:
Relative Path
A relative file path points to a file relative to the current
page. In the following example, the file path points to a
file in the images folder located at the root of the
current web:
Best Practice
It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will


not be bound to your current base URL. All links will
work on your own computer (localhost) as well as on
your current public domain and your future public
domains.
HTML Entities
HTML Entities
THANK YOU

You might also like