Introduction to Web
Development
What is Internet
• Interconnected network of computers around
the world.
How Internet Works
What is Web Development
• Building websites for the internet
Request Response Cycle
HTML, CSS and JavaScript
What is HTML
• HTML means Hypertext Markup Language
where markup means structure and
formatting of website or webpage.
HTML Elements
• Standard elements that browsers recognizes
• Combination of opening tag, content and
closing tag is called HTML elements.
HTML Tags
• The component used to design the structure
of websites are called HTML Tags.
• A container for some content or other tags.
Paragraph Element
• The <p> HTML element represents a
paragraph.
Heading Element
• The <h1> to <h6> HTML element represent six
levels of section headings.
• <h1> is the highest section level and <h6> is
the lowest.
Assignment 1
• Recreate the given image using HTML Tags
HTML Boilerplate
• This is the standard format or skeleton of
writing HTML code.
Lists in HTML
Lists in HTML
Attributes in HTML
• Attributes are used to add more information
to the tag.
• <html lang=“en”>
Anchor Element
• Anchor element is used to add links to your
page.
Image Element
• Image element is used to add image to your
page.
Practice QS-2
• Create an unordered list of 3 fruits – apple,
orange and mango that also shows links to
their pictures.
Some Other HTML Tags
• <br> tag is used to add next line(line breaks)
to your page.
• <b>, <i> and <u> tags are used to highlight
text in your page.
• HTML is not a Case Sensitive Language.
• <hr> tag is horizontal rule element.
Comments in HTML
• This is part of code that should not be parsed.
Practice QS-3
• Create a Portfolio Page
• Add your name and picture on top.
• Add sections for your Education, Skills,
Hobbies and Contact.
Inline Element
• Takes up only necessary width.
• Don’t start from new line.
Block Element
• Takes up the full width available(whole block).
• Start from new line.
Am I Inline or Block
• Heading Element
• Paragraph Element
• Anchor Tag
• Image Element
Div Element
• Div means Content Division Element.
• Div is a container used to hold other HTML
elements or group elements together.
• It is a block element.
Span Element
• Span is also a generic container used to hold
other HTML elements or group elements
together.
• It is an inline element.
Sub and Sup Tag
• Sup means Superscript Tag.
• Sub means Subscript Tag.
Practice QS-4
• Print the following on the screen using <h1>
heading element
Semantic Markup
• It is the markup that relates to the meaning of
content.
Practice QS-5
• Add Semantic Markup to your Portfolio page.
HTML Entities
• It is a piece of text that begins with an
ampersand(&) and ends with semicolon(;).
• Used to display reserved characters(which would
otherwise be interpreted as HTML code) and
invisible characters(like non breaking spaces).
• Can also use in place of characters that are
difficult to type with a standard keyboard.
• Browser interprets them and renders correct
character.
Practice QS-6
HTML 5
• The term HTML5 is essentially a buzzword
that refers to a set of modern web
technologies.
• This includes the HTML Living Standard, along
with JavaScript APIs to enhance storage,
multimedia and hardware access.
• HTML Standard is a document that tells to the
browser how HTML should work.
Tables in HTML
• Tables are used to represent real life table
data.
• <tr> is used to display table row.
• <td> is used to display table data.
• <th> is used to display table header.
Semantics in Table
• <thead> is used to wrap table header.
• <tbody> is used to wrap table body.
• <tfoot> is used to wrap table footer.
Colspan and Rowspan Attributes
• It is used to create cells which spans over
multiple rows or columns..
Practice QS-7
• Re-create the following table using HTML
Forms in HTML
• Forms are used to collect data from the user.
• Action attribute is used to define what action
needs to be performed when a form is
submitted or where the form data should be
sent.
• <form action=“/[Link]”>
Input Element in Form
• It is used to create multiple form controls.
• There are multiple types of inputs that can be
created using type attribute.
• <input type=“text”>
• <input type=“password”>
• <input type=“number>
• <input type=“time”>
Placeholder Attribute in Form
• The placeholder attribute defines the text
displayed in a form control when the control
has no value.
• <input type=“text” placeholder=“Enter
Name”>
Label Element in Form
• Label element represents a caption for an item in a
user interface.
• <label>
– Enter your username:
– <input type=“text” placeholder=“username”
</label>
Label Classical Approach
<label for=“username”>Enter your username:</label>
<input type=“text” id=“username”
placeholder=“username”>
Button Element
• <button>Submit</button>
• Type attribute in button element
• <button type=“submit”>submit</button>
• <button type=“button”>hello</button>
• <button type=“reset”>reset</button
• Button using input
• <input type=“submit” value=“click me”>
Name Attribute in Form
• Name of the form control. Submitted with the
form as a part of name/value pair.
• <input type=“text” placeholder=“enter name”
id=“username” name=“username”/>
Practice QS-8
• Create a search option that redirects its search
request to google
Checkbox Attribute in Form
• <input type=“checkbox” name=“age” id=“age”
checked/>
• <label for=“age”> I am 18+ </label>
Radio Button Attribute in Form
• <input type=“radio” name=“fruit” id=“apple”
value=”apple”/>
• <label for=“apple”> Apple </label>
Select Element
• <select name=“profession” id=“profession”>
• <option value=“stu”> Student </option>
• <option value=“dev”> Developer </option>
• </select
Range Attribute in Form
• <label for=“volume”> Volume </label>
• <input type=“range” min=“0” max=“100”
id=“volume” name=“vol”/>
Textarea Element in Form
• <label for=“feedback”> Please enter your
valuable feedback:</label>
• <textarea id=feedback”></textarea>
Practice QS-9
• Recreate the following form with suitable
elements and input types
