2. Structure of a website
• website is mostly made up of numerous
webpages. These webpages are HTML
documents that are stored in a directory on
a domain. The domain should not be
confused with the website. The domain is
the internet address via which the content
of the website can be called up.
• HTML is not a programming language but
a page description language:
3. • In the code, it is defined which element is to
be displayed at which point. This means in
the design of a website, there is not a picture
used for the entire site, rather it is defined in
the code how the font, the colors and, of
course, possible pictures or videos are to be
arranged – depending on what device is
being used (e.g. desktop computer or
smartphone) to access it.
4. HTML
• HTML stands for HyperText Markup Language.
• HTML is used to create web pages and web
applications.
• HTML is widely used language on the web.
• We can create a static website by HTML only.
5. HTML text Editors
• An HTML file is a text file, so to create an HTML
file we can use any text editors.
• Text editors are the programs which allow
editing in a written text, hence to create a web
page we need to write our code in some text
editor(Notepad++, Sublime Text, Vim,
etc. )
6. Building blocks of HTML
• An HTML document consist of its basic building
blocks which are
• Tags: An HTML tag surrounds the content and
apply meaning to it. It is written between < and
> brackets.
• Attribute: An attribute in HTML provides extra
information about the element, and it is applied
within the start tag. An HTML attribute contains
two fields: name & value
7. Syntax
• <tag name attribute_name= " attr_value"> con
tent </ tag name>
• Elements: An HTML element is an individual
component of an HTML file. In an HTML file,
everything written within tags are termed as
HTML
elements(heading,paragraph,list,table,link and
so on).
8. All HTML tags must enclosed within < >
these brackets.
Every tag in HTML perform different
tasks.
If you have used an open tag <tag>, then
you must use a close tag </tag> (except
some tags)
Syntax
• <tag> content </tag>
10. • Void element: All the elements in HTML do
not require to have start tag and end tag, some
elements does not have content and end tag such
elements are known as Void elements or empty
elements. These elements are also called as
unpaired tag.
• Some Void elements are <br> (represents
a line break) , <hr>(represents a
horizontal line), etc.
11. • <!DOCTYPE>
• <html>
• <head>
• <title>Web page title</title>
• </head>
• <body>
• <h1>Write Your First Heading</h1>
• <p>Write Your First Paragraph.</p>
• </body>
• </html>
12. • <html>
• <head>
• <title>The basic building blocks of HTML</title>
• </head>
• <body>
• <h2>The building blocks</h2>
• <p>This is a paragraph tag</p>
• <p style="color: red">The style is attribute of paragrap
h tag</p>
• <span>The element contains tag, attribute and content
</span>
• </body>
• </html>
13. HTML Attribute
• HTML attributes are special words which provide additional
information about the elements or attributes are the modifier of the
HTML element.
• Each element or tag can have attributes, which defines the behavior
of that element.
• Attributes should always be applied with start tag.
• The Attribute should always be applied with its name and value
pair.
• The Attributes name and values are case sensitive, and it is
recommended by W3C that it should be written in Lowercase only.
Syntax
• <element =attribute name:value">content</element>
• <p style=“color:red”>the first paragraph of the
document</p>
14. Example of attri.
• <html>
• <head>
• </head>
• <body>
• <h1> This is Style attribute</h1>
• <p style="height: 50px; color: blue">It will add style pr
operty in element</p>
• <p style="color: red">It will change the color of content
</p>
• </body>
• </html>
15. Example:
• <html>
• <head>
• </head>
• <body>
• <div style="background-color: lightblue">This is first d
div>
• <div style="background-
color: lightgreen">This is second div</div>
• <p style="background-
color: pink">This is a block level element</p>
• </body>
• </html>
16. HTML Formatting
• is a process of formatting text for better look and
feel. HTML provides us ability to format text
without using CSS. There are many formatting tags
in HTML. These tags are used to make text bold,
italicized, or underlined.
• In HTML the formatting tags are divided into two
categories:
• Physical tag: These tags are used to provide the
visual appearance to the text.
• Logical tag: These tags are used to add some logical
or semantic value to the text
17. HTML Heading
• A HTML heading or HTML h tag can be
defined as a title or a subtitle which you
want to display on the webpage. When you
place the text within the heading tags
<h1>.........</h1>, it is displayed on the
browser in the bold format and size of the
text depends on the number of heading.
• There are six different HTML headings
which are defined with the <h1> to <h6>
tags, from highest level h1 (main heading)
to the least level h6 (least important
heading).
18. HTML Anchor
• The HTML anchor tag defines a hyperlink that links
one page to another page. It can create hyperlink to
other web page as well as files, location, or any URL.
• href attribute of HTML & it points out the destination
page.
• The syntax of HTML anchor tag is given below.
• <a href = "..........."> Link Text </a>
20. Appearance of HTML anchor tag
• An unvisited link is displayed underlined and blue.
• A visited link displayed underlined and purple.
• An active link is underlined and red.
HTML Image
• HTML img tag is used to display image on the web
page. HTML img tag is an empty tag that contains
attributes only, closing tags are not used in HTML
image element.
• <img src="good_morning.jpg" alt="Good Morning Fri
ends"/>
21. Attributes of HTML img tag
• 1) src(source)
• 2) alt(alternative)
• 3) width
• 4) height
Example:
• <img src="animal.jpg" height="180" width="300
" alt="animal image">
22. How to get image from another directory/folder?
• <img src="E:/images/
animal.png" height="180" width="300" alt="animal image"
>
Use <img> tag as a link
• We can also link an image with other page or we can use an
image as a link. To do this, put <img> tag inside the <a> tag.
• Example:
• <a href="https://www.javatpoint.com/what-is-
robotics"><img src="robot.jpg" height="100" width="100"
></a>
23. HTML Table
• HTML table tag is used to display data in tabular form
(row * column). There can be many columns in a row.
• We can create a table to display data in tabular form, using
<table> element, with the help of <tr> , <td>, and <th>
elements.
• In Each table, table row is defined by <tr> tag, table header
is defined by <th>, and table data is defined by <td> tags.
• HTML tables are used to manage the layout of the page e.g.
header section, navigation bar, body content, footer section
etc. But it is recommended to use div tag over table to
manage the layout of the page .
24. Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more
columns in a table for formatting.
<col> It is used with <colgroup> element to
specify column properties for each
column.
<tbody> It is used to group the body content
in a table.
<thead> It is used to group the header
content in a table.
<tfooter> It is used to group the footer content
26. • 1) HTML Border attribute
• You can use border attribute of table tag in HTML
to specify border. But it is not recommended now.
• <table border="1">
• <tr><th>First_Name</
th><th>Last_Name</th><th>Marks</th></
tr>
• <tr><td>Sonoo</td><td>Jaiswal</
td><td>60</td></tr>
• </table>
27. HTML Lists
• Ordered List or Numbered List (ol)
• Unordered List or Bulleted List (ul)
• Description List or Definition List (dl
1. Ordered List or Numbered List (ol)
• <ol>
• <li>Aries</li>
• <li>Bingo</li>
• <li>Leo</li>
• <li>Oracle</li>
• </ol>
28. 2. Unordered List or Bulleted List (ul)
• <ul>
• <li>Aries</li>
• <li>Bingo</li>
• <li>Leo</li>
• <li>Oracle</li>
• </ul>
29. 3. Description List or Definition List (dl)
• HTML Description List or Definition List displays
elements in definition form like in dictionary. The
<dl>, <dt> and <dd> tags are used to define
description list.
• The 3 HTML description list tags are given below:
• <dl> tag defines the description list.
• <dt> tag defines data term.
• <dd> tag defines data definition (description).
• </dl>
30. HTML Form
• An HTML form is a section of a
document which contains controls such as text
fields, password fields, checkboxes, radio
buttons, submit button, menus etc.
• An HTML form facilitates the user to enter data
that is to be sent to the server for processing
such as name, email address, password, phone
number, etc.
31. Tag Description
<form> It defines an HTML form to enter inputs
by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in
a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
32. HTML <form> element
• Syntax:
• <form>
• //Form elements
• </form>
<html>
• <body>
• <form>
• Enter your name <br>
• <input type="text" name="username">
• </form>
• </body>
• </html>
34. HTML <textarea> tag in form
• The <textarea> tag in HTML is used to insert multiple-line text in a form. The size
of <textarea> can be specify either using "rows" or "cols" attribute or by CSS.
• Example:
• <!DOCTYPE html>
• <html>
• <head>
• <title>Form in HTML</title>
• </head>
• <body>
• <form>
• Enter your address:<br>
• <textarea rows="2" cols="20"></textarea>
• </form>
• </body>
• </html>
36. HTML Password Field Control
• The password is not visible to the user in
password field control.
• <form>
• <label for="password">Password: </label>
• <input type="password" id="password"
name="password"/> <br/>
• </form>
37. HTML Email Field Control
• It validates the text for correct email address.
You must use @ and . in this field.
• <form>
• <label for="email">Email: </label>
• <input type="email" id="email" name=
"email"/> <br/>
• </form>
38. Radio Button Control
The radio button is used to select one option from multiple
options. It is used for selection of gender, quiz questions etc.
• If you use one name for all the radio buttons, only one radio
button can be selected at a time.
• Using radio buttons for multiple options, you can only
choose a single option at a time.
• <form>
• <label for="gender">Gender: </label>
• <input type="radio" id="gender" name="gender" v
alue="male"/>Male
• <input type="radio" id="gender" name="gender" v
alue="female"/>Female <br/>
• </form>
39. Checkbox Control
• The checkbox control is used to check multiple options from given checkboxes.
• <form>
• Hobby:<br>
• <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
• <label for="cricket">Cricket</label> <br>
• <input type="checkbox" id="football" name="football" value="football"/
>
• <label for="football">Football</label> <br>
• <input type="checkbox" id="hockey" name="hockey" value="hockey"/
>
• <label for="hockey">Hockey</label>
• </form>
• Note: These are similar to radio button except it can choose multiple options at a
time and radio button can select one button at a time, and its display.
