What is HTML?
• HTML stands for HyperText Markup Language and it is
used to create webpages.
• It uses HTML tags and attributes to describe the
structure and formatting of a web page.
• HTML consists of various elements, that are responsible
for telling search engines how to display page content.
• For example,
headings, lists, images, links, and more.
Features of HTML
• It is easy to learn and easy to use.
• It is platform-independent.
• Images, videos, and audio can be added to a web page.
• Hypertext can be added to the text.
• It is a markup language.
Advantages of HTML Disadvantages of HTML
• HTML is used to build • HTML can only create static
websites. web pages. For dynamic web
• It is supported by all browsers. pages, other languages have to
be used.
• It can be integrated with other
languages like CSS, JavaScript, • A large amount of code has to
etc. be written to create a simple
web page.
• The security feature is not
good.
HTML Page
Structure
HTML Elements and Tags
• HTML uses predefined tags and elements that instruct
the browser on how to display the content.
• HTML elements include an opening tag, some content,
and a closing tag.
<!DOCTYPE> it is an information to the browser about what document
type to expect.
NOT a HTML tag
<html> is represents root of HTML document.
<head> is usually defines the header of the section or webpage.
<title> is defines the title or name of HTML document.
<body> is used to defines the main content of the document.
<p> is represents a paragraph in HTML document.
<br> is used to apply single line break.
NO close tag.
<h1> to <h6> it defines headings for HTML document from level 1 to
level 6.
<img> is used to insert an image within HTML document.
Self close tag.
<button> is used to represent a clickable button.
e.g.<button> home </button>
HTML Formatting Elements
<b> Bold text
<strong>- Important text
<i> Italic text
<u> Underline text
<em> - Emphasized text
<sub> - Subscript text H2O
<sup> - Superscript text 2^3
<mark> highlight the text
<small> small text
<!-- --> comment
HTML Editors List
• Notepad
• Brackets Similar to the Notepad editor, create a
new file and save it with a .html
• Sublime Text Editor extension to run an HTML file.
• Atom
• Visual Studio Code
• Open the VS code Editor and Install the Live Server. By clicking the
extension button simply search live server on the search bar and
download. Live server extension helps to run the code and display output.
• Create a new File and save it with the .html extension and use the open
live server button to click the right button.
HTML Attributes
• HTML attributes provide additional information about elements
within an HTML document.
• Attributes are always defined in the start tag.
HTML src Attribute
HTML alt Attribute
HTML width and height Attribute
HTML href Attribute
HTML style Attribute
HTML src Attribute
• The src attribute in HTML specifies the URL of a resource (such as
an image, audio, or video) to be embedded or included in the
webpage.
<img src = “esoft.png">
HTML alt Attribute
• The alt attribute in HTML provides alternative text for an image if
the image cannot be displayed. It improves accessibility and
provides context for screen readers.
<img src= “esoft.png" alt="The Logo">
HTML width and height Attribute
• The width and height Attribute is used to adjust the width and
height of an image(in pixels).
<img src=esoft.png" width="300px" height="100px">
HTML href Attribute
• The href attribute in HTML, used with the <a> tag, specifies a link
destination. Clicking the linked text navigates to this address.
<a href="https://www.esoft.lk/"target="_blank">
HTML style Attribute
• The style attribute is used to provide various CSS effects to the
HTML elements such as increasing font-size, changing font-family,
coloring, etc.
<h2 style="font-family:Chaparral Pro Light;"> Hello ESOFT. </h2>
<h3 style="font-size:20px;"> Hello ESOFT. </h3>
<h2 style="color:#8CCEF9;">Hello ESOFT.</h2>
<h2 style="text-align:center;"> Hello ESOFT. </h2>
List in HTML
• The unordered list items are marked with bullets.
• An unordered list starts with the <ul> tag.
• Each list item starts with the <li> tag.
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
• In an ordered list, all list items are marked with numbers
by default.
• An ordered list starts with the <ol> tag.
• Each list item starts with the “li” tag.
<ol type="i"> <ol reversed> <ol start="5">
<li>HTML</li> <li>HTML</li> <li>HTML</li>
<li>CSS</li> <li>CSS</li> <li>CSS</li>
<li>JS</li> <li>JS</li> <li>JS</li>
</ol> </ol> </ol>
Tables in HTML
• An HTML table is defined with the “table” tag.
• Each table row is defined with the “tr” tag.
• A table header is defined with the “th” tag.
• By default, table headings are bold and centered.
• A table data/cell is defined with the “td” tag.
HTML Table - Colspan
HTML Table - Rowspan
TASK
HTML Symbols
©:copyright sign - ©
®:registered trade mark sign - ®
:trade mark sign - ™
@: at symbol - @
HTML Forms
• The HTML <form> element is used to create an HTML form
for user input.
• The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons,
submit buttons, etc.
<form>
.
form elements
.
</form>
The <label> Element
• The <label> element is useful for screen-reader users, because
the screen-reader will read out loud the label when the user
focuses on the input element.
The <input> Element
• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways, depending on
the type attribute.
Text Fields
• The <input type="text"> defines a single-line input field for text
input.
• <input>:
This is the HTML tag used to create an input field where users can enter data.
• type="text":
This specifies that the input field is of type "text." It means that the user can
enter any text data into this field.
• id="fname":
The id attribute uniquely identifies this input field within the page. It's often
used in conjunction with labels or in JavaScript to manipulate the element.
• name="fname":
The name attribute is used when the form data is submitted. The value
entered in this field will be sent with the key "fname" to the server.
For example, if a user enters "John" in this field and submits the form, the data sent
to the server will be something like fname=John.
Submit Button
• The <input type="submit"> defines a button for submitting the
form data to a form-handler.
• The form-handler is typically a file on the server with a script for
processing input data.
<button> Element
TASK
Checkboxes
• Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
Radio Buttons
• Radio buttons let a user select ONE of a limited number of
choices.
TASK
<select> Form Element in HTML
• The select element is used to define a drop-down list.
• Dropdowns are useful when you want the user to select a value
from a list of values.
• By default, the first value in the dropdown list gets selected;
we can also change the default values by defining the
selected attribute inside the option element.
The <textarea> Element
• The text area is used to define a multiline text input field. text
inputs are useful if we want to take multiline inputs from a user.
The <fieldset> and <legend> Elements
• The fieldset element is used to group different input tags under
one category together and the legend element is used to define
the caption for the fieldset element.
Input Type Date
• Input type=“date” is used to render a date picker to take input
as a date from the user.
Required & Autofocus
Input Type File
• Input type=”file” allows users to browse and upload files on a
web page.
Input Type Search
• Input type=”search” is used to create a search field that is
similar to the normal text field.
TASK
