[go: up one dir, main page]
Scribd
Upload
17 views39 pages

Web Page

Chapter 3 covers the fundamentals of web development, focusing on the structure of a website, HTML as a markup language, and the various components that make up HTML documents. It explains the use of tags, attributes, and elements, as well as formatting, lists, tables, and forms in HTML. The chapter also includes examples of HTML syntax and practical applications such as creating links, images, and user input forms.

Uploaded by

microsoftmosai
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
17 views39 pages

Web Page

Chapter 3 covers the fundamentals of web development, focusing on the structure of a website, HTML as a markup language, and the various components that make up HTML documents. It explains the use of tags, attributes, and elements, as well as formatting, lists, tables, and forms in HTML. The chapter also includes examples of HTML syntax and practical applications such as creating links, images, and user input forms.

Uploaded by

microsoftmosai
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/ 39

Chapter 3

Web development
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:
• 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.
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.
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. )
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
Syntax
• <tag name attribute_name= " attr_value
"> content </ 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,lin
k and so on).
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>
• 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.
• <!DOCTYPE>
• <html>
• <head>
• <title>Web page title</title>
• </head>
• <body>
• <h1>Write Your First Heading</h1>
• <p>Write Your First Paragraph.</p>
• </body>
• </html>
• <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 pa
ragraph tag</p>
• <span>The element contains tag, attribute and
content</span>
• </body>
• </html>
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>
Example of attri.
• <html>
• <head>
• </head>
• <body>
• <h1> This is Style attribute</h1>
• <p style="height: 50px; color: blue">It will ad
d style property in element</p>
• <p style="color: red">It will change the color
of content</p>
• </body>
• </html>
• <html>
Example:
• <head>
• </head>
• <body>
• <div style="background-
color: lightblue">This is first div</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>
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
• A HTML heading or HTML h tag can be
HTML Heading
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).
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>
• <html>
• <head>
• <title></title>
• </head>
• <body>
• <a href="https://
www.youtube.com/" target="_blank"> this-
link </a>
• <a href=“C:\Users\Hp\Desktop\
hi.html>click here</a>
• </body>
• </html>
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 Morni
ng Friends"/>
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">
How to get image from another directory/folder?

• <img src="E:/images/
animal.png" height="180" width="300" alt="anima
l 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" widt
h="100"></a>
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 .
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 in a table.
Example

• <table>
• <tr><th>First_Name</th><th>Last_Name</
th><th>Marks</th></tr>
• <tr><td>Sonoo</td><td>Jaiswal</
td><td>60</td></tr>
• <tr><td>James</td><td>William</
td><td>80</td></tr>
• <tr><td>Swati</td><td>Sironi</
td><td>82</td></tr>
• <tr><td>Chetna</td><td>Singh</
td><td>72</td></tr>
• </table>
• 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>
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>
2. Unordered List or Bulleted List (ul)
• <ul>
• <li>Aries</li>
• <li>Bingo</li>
• <li>Leo</li>
• <li>Oracle</li>
• </ul>
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>
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.
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.
HTML <form> element

• Syntax:
• <form>
• //Form elements
• </form>
<html>
• <body>
• <form>
• Enter your name <br>
• <input type="text" name="username">
• </form>
• </body>
• </html>
• <form>
• First Name: <input type="text" name
="firstname"/> <br/>
• Last Name: <input type="text" name
="lastname"/> <br/>
• </form>
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>
Label Tag in Form
• <form>
• <label for="firstname">First Name: </
label> <br/>
• <input type="text" id="firstname"
name="firstname"/> <br/>
• <label for="lastname">Last Name: </
label>
• <input type="text" id="lastname"
name="lastname"/> <br/>
• </form>
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="pas
sword" name="password"/> <br/>
• </form>
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>
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="gen
der" value="male"/>Male
• <input type="radio" id="gender" name="gen
der" value="female"/>Female <br/>
• </form>
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="cri
cket"/>
• <label for="cricket">Cricket</label> <br>
• <input type="checkbox" id="football" name="football" value="f
ootball"/>
• <label for="football">Football</label> <br>
• <input type="checkbox" id="hockey" name="hockey" value="ho
ckey"/>
• <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.

You might also like